Grid stack disable drag on selected element

widget = {
                x: widgetData.XPosition,
                y: widgetData.YPosition,
                w: widgetData.Width,
                h: widgetData.Height,
                id: widgetData.Id,
                content: '<div >div1</div><div>div 2</div>'
            };
grid.addWidget(widget);

I'm adding a widget Like the above, however, I want to disable dragging on div 2 and have it enabled on div on how doe's one achieve this any help would be greatly appreciated.

I'm am setting up my grid with the following options

  var options = { // put in gridstack options here
            disableOneColumnMode: true,
            acceptWidgets: true,// for jfiddle small window size
            float: false,
            autoPosition: true
        };
        grid = GridStack.init(options);

    widget = {
                    x: widgetData.XPosition,
                    y: widgetData.YPosition,
                    w: widgetData.Width,
                    h: widgetData.Height,
                    id: widgetData.Id,
                    content: '<div class="someFancyClass">div1</div><div>div 2</div>'
                };
    grid.addWidget(widget);   
 var options = { // put in gridstack options here
            disableOneColumnMode: true,
            acceptWidgets: true,// for jfiddle small window size
            float: false,
            autoPosition: true,
            draggable: {
              handle: '.someFancyClass',
              scroll: false,
              appendTo: 'body'
             }
        };   
 grid = GridStack.init(options);

This was resolved by setting up the grid in the above fashion