网格堆栈禁用选定元素上的拖动

Question

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);

我正在添加一个像上面一样的小部件，但是，我想在 div 2 上禁用拖动并在 div 上启用它关于如何实现这一点任何帮助都会很大赞赏。

我正在使用以下选项设置我的网格

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

Answer 1

    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);

已通过以上述方式设置网格解决了这个问题

Answer 2

试试这个，您需要在初始化小部件时设置“noMove”属性。这是根据文档 https://github.com/gridstack/gridstack.js/tree/master/doc#item-options

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

网格堆栈禁用选定元素上的拖动

Grid stack disable drag on selected element

html

javascript

gridstack