Question

我是Jquery UI Draggable的新手。继承了我的问题，我有2个Div，哪些项目可以在两个div之间转移。为什么当转移到其他div然后返回时，可拖动效果会丢失？我不能使用辅助克隆。元素必须始终可拖动。

这是在jsfiddle https://jsfiddle.net/w7vjuuqx/7/上复制问题：

将蓝色框从红色框拖放到绿色框中。
将蓝框从绿框拖放到红框。
重复步骤1.此处拖动效果丢失。

JS：

$('.item').draggable();

$( '#placeholder' ).droppable({
    accept: '.item',
    drop: function( event, ui ) {
      var droppable = $(this);
      var draggable = ui.draggable;
      $(draggable).attr('class', 'new_item_inside');
      draggable.appendTo(droppable);
      draggable.css({position: 'absolute', top: '0px', left: '0px'});
      alert('hello');
    }
});

$( '#item_holder' ).droppable({
  accept: '.new_item_inside',
  drop: function( event, ui ) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // var html = $(ui.draggable).clone(true);
     ui.draggable.draggable('enable');
    $(draggable).attr('class', 'item');
    draggable.appendTo('#item_holder');
    draggable.css({position: 'static', float: 'left'});

  }
});

HTML：

<div id="item_holder" style="width:100px;height:100px;background-color:red">
   <div class="item" style="width:20px;height:20px;background-color:blue">
       test
   </div>
</div>
<div id="placeholder" style="width:100px;height:100px;background-color:green;border-style: solid;display: inline-block;position:relative">

</div>

Answer 1

如果您在.item draggable上添加以下代码，您应该直观地看到拖动操作。但是，您会注意到，原始文件现在保留在原位，克隆是可拖动的。但我认为用户将知道如何处理这个问题。这不会令人困惑。

$('.item').draggable({
 revert: "invalid",
 helper: "clone",
 cursor : "move",
});

Fiddle

Answer 2

使用 sortable api可以轻松解决此用例。您使用connectWith连接两个元素，然后使用不同的事件（例如接收 - 其余部分在http://api.jqueryui.com/sortable/）进一步操作：

JS：

$('.itemContainer').sortable({
    connectWith: $('.itemContainer'),
  receive: function(event, ui) {
    console.log(ui.item[0].innerHTML);
  }
});

HTML：

<ul id="leftHolder" class="itemContainer">
  <li class="draggableItem">1</li>
  <li class="draggableItem">2</li>
  <li class="draggableItem">3</li>
</ul>

<ul id="rightHolder" class="itemContainer">
</ul>

FIDDLE： https://jsfiddle.net/gy2y5dj2/

转移div后，Jquery元素丢失了拖动效果

2 个答案: