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之后我需要做的是禁用被拖动的元素再次被拖动（我将添加一个类来突出显示这个）并禁用droppped-in元素接收任何其他dragElem（我将添加一个类到它也是。）

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

任何建议将不胜感激！

Answer 1

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

＆＃13;

$('.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");
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery UI Drag and;掉落而不掉线

1 个答案: