Javascript jqueryui拖放&；滴水不漏

我是jQueryUI新手，除了从拖动的元素中删除一个特定的数据属性之外，我真的不需要删除任何东西。有了这些数据，我将在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>

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

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

PS：我也不确定

varcod=ui.helper.data（'cod'）

是获取数据属性的最佳方式

---

任何建议都将不胜感激

您可以在选项中指定一个类，并将该特定类添加到drop回调中的Dragable中，以防止进一步拖动。要禁用可拖放功能，可以使用以下方法：

$（'.dragElem'）.draggable({
助手：“克隆”，
回复：“真”，
取消：“.disable”
});
$（'.dropElem'）。可拖放({
drop：函数（事件、用户界面）{
var cod=ui.draggable.addClass（“ui状态已禁用”）.data（“cod”）；
控制台日志（cod）；
$（此）.dropable（“禁用”）；
}
});
.dragElem{
宽度：50px；
高度：50px；
利润率：10px 5px；
背景：火红；
}
dropElem先生{
宽度：150px；
高度：50px；
背景：道奇蓝；
}

1.
2.
将类（或数据属性，…）添加到拖放的元素中。检查要拖动的元素是否在可拖动的
start
函数中有类->如果有
return false
以取消可拖动。（）谢谢TJ，我自己想出来的，但我做的几乎和你建议的一样，我会把你的答案标记为接受！
$('.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
     }
 });