Question

我正在尝试使用Jquery ui来模拟拖放，在拖放时如何才能从原始列表中删除该项？在这种情况下，我想将项目保留在图库中，但将其克隆到垃圾箱中。

   $trash.droppable({
      accept: "#gallery > li",
      activeClass: "ui-state-highlight",
      drop: function( event, ui ) {
        deleteImage( ui.draggable );
      }
    });

function deleteImage( $item ) {
      $item.fadeOut(function() {
        var $list = $( "ul", $trash ).length ?
          $( "ul", $trash ) :
          $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );

        $item.find( "a.ui-icon-trash" ).remove();
        $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
          $item
            .animate({ width: "48px" })
            .find( "img" )
              .animate({ height: "36px" });
        });
      });
    }

Answer 1

只需在$item = $item.clone()功能的开头添加deleteImage。

Answer 2

您可以使用方法返回一个辅助函数，该函数将充当可拖动对象的克隆对象。

 $( "li", $gallery ).draggable({
      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: getHelper,
      cursor: "move"
    });

function getHelper(event){

  // return html for the helper
}

请参阅链接http://shyalika.com/create_drag_and_drop_example以获取示例

Jquery droppable不会删除元素

2 个答案: