jQuery UI：在放置時，將div附加到其可放下的目標

Question

我是jQuery和jQuery UI的新手。我正嘗試將div從父div移到另一個div。到目前爲止，我的「文章」是可拖動的。 「可投資」股票恰當地標識了該文章在其上方移動，但我似乎無法找到如何將該文章附加到股票上。

我想我操縱一個「封裝在jQuery對象中的div」，但我在這裏有點迷路。

<div id="shelf" class="shelf"> 
    <div class="article">article</div> 
</div> 

<div id="stock" class="stock"> 
</div> 

然後我有一個的意思添加文章的股票股利，並從貨架DIV刪除它的腳本：

<script> 

    $('.article').draggable(); 

    var stockArea = $('#stock').droppable(); 

    stockArea.bind("drop", function(event, ui) { 

     if ($(this).find(".article")){ 
      console.log('appending ' + ui); 
      $(this).append(ui); 
     } 
    }); 
</script> 

我這樣做不對嗎？ 謝謝，

Answer 1

ui本身包含事件參數。你需要做的，執行要執行的操作是什麼：

<script> 

    $('.article').draggable(); 

    var stockArea = $('#stock').droppable({ 
     drop: function (event, ui) { 
      var target = $(event.target); 
      $(ui.draggable).appendTo(target).remove(); 
     } 
    }); 
</script> 

更新ui.draggable是參照特定元素。