JQuery UI 拖放而不拖放

Question

我是 jQuery UI 的新手，除了从拖动的元素中删除特定的数据属性外，我真的不需要删除任何东西。使用这些数据，我将在 drop 元素中构建一个新元素。

我的 html 看起来像：

<div class="dropElem">
    <div class="cod">Empty</div>
    ..elements i will populate later..
</div>

<div class="dragElem" data-cod='cod1'>
    <div>Data</div>
    ...
</div>
<div class="dragElem" data-cod='cod2'>
    <div>Data</div>
    ...
</div>

我的 Javascript 是这样的：

$('.dragElem').draggable({
    helper: "clone",
    revert: "true",
    cursorAt: {top: 0, left: 0},//mandatory for my css structure
    start: function (event, ui) {
        var clone = $(ui.helper);
        clone.addClass('helper')//class added to style the helper
    }
});

$('.dropElem').droppable({
    activeClass: "activeDrop",
    hoverClass: "hoverActiveDrop",
    tolerance: "pointer",//mandatory for my css structure
    drop: function (event, ui) {
        var cod = ui.helper.data('cod'));
        //make new elements based on data received
     }
 });

基本上我使用助手的拖动视觉效果将数据从一个元素传输到另一个元素。

drop 后我需要做的是禁止被拖动的元素再次被拖动（我将添加一个类来突出显示这一点）并禁止插入的元素接收任何其他 dragElem（我将添加一个类到也是）。

PS：我也不确定var cod = ui.helper.data('cod')); 是否是获取数据属性的最佳方式。

任何建议将不胜感激！

Answer 1

您可以在 cancel 选项中指定一个类，并将该特定类添加到 drop 回调内的可拖动对象中，以防止进一步拖动。要禁用 droppable，您可以使用 disable 方法：

$('.dragElem').draggable({
  helper: "clone",
  revert: "true",
  cancel: ".disable"
});

$('.dropElem').droppable({
  drop: function(event, ui) {
    var cod = ui.draggable.addClass("ui-state-disabled").data('cod');
    console.log(cod);
    $(this).droppable("disable");
  }
});

.dragElem {
  width: 50px;
  height: 50px;
  margin: 10px 5px;
  background: hotpink;
}
.dropElem {
  width: 150px;
  height: 50px;
  background: dodgerblue;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="dropElem"></div>
<div class="dragElem" data-cod='cod1'>
  <div>1</div>
</div>
<div class="dragElem" data-cod='cod2'>
  <div>2</div>
</div>