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

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上启用它，以了解doe的一个如何实现这一点。任何帮助都将不胜感激。

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

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-选项

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