Question

我有一个附加的可拖动元素，它具有属性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
});
}
});

现在，我想在被删除的元素上禁用draggable，并允许新添加的元素可拖动，依此类推。我怎么能这样做？

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

请参阅http://jsfiddle.net/h573y2wa/3/

小提琴

Answer 1

这是一个使用克隆的解决方案，并在删除后设置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/

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

1 个答案: