jQuery「下降」和「結束」沒有放棄

我試圖提高我的web開發技能的工作，但有點帶走了jQuery的拖放功能。不幸的是，我無法得到可投擲的「掉落」或「超過」事件。jQuery「下降」和「結束」沒有放棄

我不想使用jQuery表格拖放插件，所以我有一個td結構（所有在$（document）.ready中生成的div）中有多個div。中間div是可投入的，最內部的div是可拖動的。生成的HTML如下所示：

<td class="vertical"> 
<div id="droppable3" class="droppable ui-droppable" style="width: 100%; height: 100%;" 
over="function() { alert("working!"); }" 
drop="function (event, ui) { 
    debugger; 
    var firstDrag = ui.draggable; 
    var secondDrag = $(this).childNodes[0]; 
    var destDrop = $(this); 
    var sourceDrop = firstDrag.parent; 
    $("#middle").append("first drag:" + firstDrag.id + "\nSecondDrag:" + secondDrag.id 
    + "\ndest Drop:" + destDrop.id + "\nsourceDrop:" + sourceDrop.id); }"> 
     <div id="draggable3" class="draggable ui-draggable" 
     style="width: 100%; height: 100%;"> 
     </div> 
</div> 
</td>

而且在除了ID之外的其他TD中完全相同。

現在拖動似乎正常工作;我可以拖動這個內部div，如果我不把它放在合適的droppable上，或者只是粘在那裏，但是它不會觸發「over」或「drop」事件，它會恢復原狀。該代碼中的調試器行永遠不會被觸發。

下面的是我如何建立可拖動/可棄：

function getTD(claz){ 
var td = jQuery("<td/>",{'class': claz}); 
var droppable = jQuery("<div/>",{ 
    'class': 'droppable', 
    width: '100%', 
    height:'100%', 
    id: "droppable"+ids[index], 
    over: function() { 
     alert('working!'); 
    }, 
    drop: function(event,ui){ 
     debugger; 
     var firstDrag = ui.draggable; 
     var secondDrag = $(this).childNodes[0]; 
     var destDrop = $(this); 
     var sourceDrop = firstDrag.parent; 
     $("#middle").append("first drag:"+firstDrag.id +"\nSecondDrag:"+secondDrag.id 
      +"\ndest Drop:"+destDrop.id +"\nsourceDrop:"+sourceDrop.id); 

     } 
    }); 
    var draggable = jQuery("<div/>",{ 
     'class': 'draggable', 
     width: '100%', 
     height:'100%', 
     id: "draggable"+ids[index], 
    }); 

    draggable.draggable({ 
     revert: 'invalid' 
    }); 
    droppable.droppable({ 
     accept: ".draggable" 
    }); 
    index++; 
    droppable.append(draggable); 
    td.append(droppable); 
    return td;

}

基本上我想實現在一臺交換瓦片和我敢肯定的JS在事件處理程序是垃圾，但我們會處理它，一旦它的射擊。

噢和IM使用： https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js

任何意見，將不勝感激。謝謝:)

編輯：

我是真的傻了。我在元素的屬性中放置了「drop」和「over」事件，而不是可丟棄的選項！

來源

2011-06-20 Jason S

回調是它現在你把可投放的選項事件的工作？ –

是that你想要什麼？

請注意，您應該創建一個可放開，像這樣

$("#something").droppable({ 
    drop: function(event, ui) { 
     // action 
    }, 
    over: function() { 
     // action 
    } 
});

來源

2011-06-20 15:24:29

不錯！答案並不公平，它內部的小提琴並不公平。如果你正在閱讀，請查看小提琴。 –

jQuery「下降」和「結束」沒有放棄

回答

相關問題