我有 Jquery 代碼可以將元素拖放到 work_area div 中，效果非常好。但是，當我嘗試將相同的函式應用于預加載的 DOM 元素時，可拖動函式在檔案就緒時使用另一個 draggable() 函式，預加載的元素在作業區域內是可拖動的，但新元素不是。
為了更好地理解這里的代碼：
拖放新元素的代碼：
function dragger() {
$(".draggable").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
helper: "clone",
cursor: "move"
});
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
console.log("here2");
$("#work_area_div_sub").droppable({
accept: ".draggable",
containment: "#work_area_div_sub",
drop: function( event, ui ) {
console.log("here3");
ui.draggable.clone().appendTo($(this)).draggable().removeClass("draggable").addClass("draggable2");
$(".draggable2").resizable({
handles: "n, e, s, w, se, ne, sw, nw",
aspectRatio: true
});
});
}
$(document).ready(function() {
dragger();
});
請注意，上面的代碼允許將（克隆）具有類名的元素拖放draggable到 work_area div 中，進一步可以在 work_area div 中拖動。并且作業得很好。
同時，當我draggable2使用以下代碼將相同的內容應用于具有類的預加載元素時：
function dragger_idle() {
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
$("#work_area_div_sub").droppable({
accept: ".draggable2",
containment: "#work_area_div_sub",
drop: function( event, ui ) {
console.log("here");
}
});
}
$(document).ready(function() {
dragger_idle();
});
作業正常，讓我拖動 work_area div 中的預加載元素拖動。但是讓我拖放新元素的第一段代碼不起作用。但是，如果我洗掉dragger_idle()該dragger()功能，該功能將完全執行。
我在每個可能的位置嘗試了 condole.log 來檢查函式運行的程度。然而，不知道我在哪里搞砸了。
起初我以為$("#work_area_div_sub").droppableindraggable_idle()搞砸了$("#work_area_div_sub").droppableindraggable()但安慰它告訴我$("#work_area_div_sub").droppable當我嘗試拖動新元素時根本沒有觸發。
希望我很清楚。任何幫助是極大的贊賞。
uj5u.com熱心網友回復：
所以，經過一番頭腦風暴后，我想通了。
function dragger() {
$(".draggable").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
helper: "clone",
cursor: "move"
});
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
$("#work_area_div_sub").droppable({
accept: ".draggable, .draggable2",
containment: "#work_area_div_sub",
drop: function( event, ui ) {
if((ui.draggable).hasClass('draggable2')) { } else {
//whatever we wanna do with the new drag drop elements
}
}
});
}
所以，我真正做的是，
- 告訴
#work_area_div_subdiv 接受兩個類draggable和draggable2 - 并且在將克隆或其他函式添加到洗掉的元素時，添加了一個
if以檢查它是一個draggable還是另一個。 - 最后相應地添加了引數。
坦率地說，雖然沒有答案，但堆疊確實幫助我以不同的方式理解自己的問題，通過寫下來自己解決問題。所以。謝謝。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/378853.html
標籤：javascript 查询 jquery-ui 可拖动的 jquery-ui-可拖动
上一篇：誰能幫我根據年齡重定向？