Question

我正在使用jQuery UI进行拖放。

JsFiddle here

<div id="draggable" class="ui-widget-content">
    <div id="" class="draggables">
      <label>Text Input</label>
      <input type="text" name="textinput" />
    </div>

    <div id="" class="draggables">
      <label>File Upload</label>
      <input type="file" name="fileinput" />
    </div>

    <div id="" class="draggables">
      <label>Textarea Input</label>
      <textarea rows="3" cols="20" name="textareainput" ></textarea>
    </div>
</div>

<div id="sortable" class="ui-widget-content">
  <p></p>
</div>

请注意，此处draggable和sortable是div的ID

我正在使用克隆从draggable进行拖动并放入sortable。现在我想从sortable拖拽并放入draggable该元素销毁而不更改draggable元素意味着3 draggable的div将保持相同但是如果{{ 1}} draggable中的元素下降比3 div不会保持不变

我知道这是因为我使用了drop事件。如何解决这个问题

Answer 1

获得解决方案在Droppable jQuery UI中有一个方法接受使用我解决了这个问题。

$(function() {

  $( "#sortable" ).droppable({
     drop: function( event, ui ) {
         ui.draggable.addClass( "droppables" ); //using this add class
     }
   });
   $('#draggable').droppable({
      accept: ".droppables",  // using this which draggable elements are accepted by the droppable.
      drop: function(event, ui) {
          ui.draggable.remove();
      }
  });

});

查看jsFiddle here

使用jQuery UI拖动n Drop

1 个答案: