JQuery - 基于数据选择器禁用可拖动元素答案

【问题标题】：JQuery - Disable draggable element based on data selectorJQuery - 基于数据选择器禁用可拖动元素
【发布时间】：2014-12-09 02:40:16
【问题描述】：

我有一个附加的可拖动元素，它具有属性data-pin 的动态值：

var pin = 0;

$('#pins').append("<div class='pin' data-pin=" + pin + "></div>");

$('*[data-pin=' + pin + ']').draggable({
  stack: '#pins div',
  revert: false
});

当元素被拖到 droppable 上时，一个新的可拖动元素会像以前一样被追加：

$('#drop_box').droppable({
  drop: function (event, ui) {
  pin ++;
  $('#pins').append("<div class='pin' data-pin=" + pin + "></div>");
  $('*[data-pin=' + pin + ']').draggable({
  stack: '#pins div',
  revert: false
});
}
});

现在，我想禁用拖放元素的可拖动功能，并允许新添加的元素可拖动，等等。我该怎么做？

我还希望新添加的元素位于容器 div 中的同一位置，而不是出现在 div 中的先前元素空间之后。这个可以吗？

见小提琴http://jsfiddle.net/h573y2wa/3/

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

这里是一个使用克隆的解决方案，并且在drop之后设置data-pin属性。您可以看到我只使用一个引脚作为可拖动和克隆所需的内容。

var pin = 0;

$('<div class="pin"></div>').appendTo('#pins').draggable({
    appendTo: '#drop_box',
    helper: 'clone',
    stack: '#drop_box .pin',
    revert: false
});

$('#drop_box').droppable({
    drop: function (event, ui) {        
        ui.helper.clone().attr('data-pin', pin).appendTo(this);
        pin++;
    }
});

http://jsfiddle.net/snvsdkas/1/

【讨论】：