可拖動和投擲的功能

Question

比方說，我有一些可放開div的我的左手邊標題區1 - 4

<div id="zone1"></div> 
<div id="zone2"></div> 
<div id="zone3"></div> 
<div id="zone4"></div> 

而且在我右手邊的一些可拖動的項目

<div id="drag1">Apple</div> 
<div id="drag2">Banana</div> 
<div id="drag3">Kiwi</div> 
<div id="drag4">Orange</div> 

我知道我可以設置這些可拖動和投擲的如下：

for (var i=1;i<=4;i++) 
{ 
    var x = "zone" + i; 
    $(x).droppable(); 
} 
    for (var i=1;i<=4;i++) 
{ 
    var x = "drag" + i; 
    $(x).draggable(); 
} 

現在我將如何去觸發功能當一個水果落在一個區域時開始，這個區域可以讓我在落下的地方（zone1，zone2等）以及哪個水果落在那裏。理想情況下，我不想要水果名稱，我想要一個與可能隱藏在隱藏的輸入標籤中的水果相關的ID或其他東西？

Answer 1

一個例子來自this tutorial

$(init) 

function init() { 
    $('#makeMeDraggable').draggable(); 
    $('#makeMeDroppable').droppable({ 
    drop: handleDropEvent 
    }); 
} 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!'); 
} 

Answer 2

您可以使用drop事件droppable互動。在此事件處理程序$(this)中指向droppable元素，其中ui.draggable指向可拖動元素。

for (var i=1;i<=4;i++) 
{ 
    var x = "zone" + i; 
    $(x).droppable({ 
     drop: function(){ 
      //This will alert the id of container in which fruit is dropped 
      alert($(this).attr('id')); 

      //This will alert the id of fruit container which is dragged 
      alert($(ui.draggable).attr('id')); 
     } 
    }); 
} 
    for (var i=1;i<=4;i++) 
{ 
    var x = "drag" + i; 
    $(x).draggable(); 
} 

Answer 3

我建議你這樣做，而不是你有什麼。

<div id="zone1" class="droppable"></div> 
<div id="zone2" class="droppable"></div> 
<div id="zone3" class="droppable"></div> 
<div id="zone4" class="droppable"></div> 

<div id="drag1" class="draggable">Apple</div> 
<div id="drag2" class="draggable">Banana</div> 
<div id="drag3" class="draggable">Kiwi</div> 
<div id="drag4" class="draggable">Orange</div> 

然後爲你的腳本：

var fruit_id = ''; 
var dropbox_id = ''; 
$('.draggable').draggable(); 
$('.droppable').droppable({ 
       drop: function(event, ui) { 
      fruit_id = $(ui.draggable).attr('id'); 
          dropbox_id = $(this).attr('id'); 
          /* DO SOMETHING HERE */ 
     } 
}); 
/* Or do something here! */ 

希望幫助！

Answer 4

<style> 
.zones>div{ border:solid 1px gray; background-color:yellow; padding:20px;margin:5px;} 
</style> 

<div class="zones"> 
    <div id="zone1"></div> 
    <div id="zone2"></div> 
    <div id="zone3"></div> 
    <div id="zone4"></div> 
</div> 


<div id="drag1" fruitid="1">Apple</div> 
<div id="drag2" fruitid="2">Banana</div> 
<div id="drag3" fruitid="3">Kiwi</div> 
<div id="drag4" fruitid="4">Orange</div> 

<script> 

$("div[id*='zone']").droppable({ 
      accept: "div[id*='drag']", 
      drop: function(event, ui) { 
       alert(ui.draggable.text() + " with fruitid = "+ ui.draggable.attr("fruitid")+" added to " + $(this).attr("id")); 
        $("<div/>").text(ui.draggable.text()).appendTo(this); 
      } 
     }) 
$('div[id*="drag"]').draggable({helper: "clone"}); 

</script>