拖放知道children.length

我試圖讓用戶通過拖放來定購類別。我有一個代碼工作，但它只是拖動和放到另一個div，我需要確保如果有一個div那裏已經切換，而不是下降，但我有很多問題。拖放知道children.length

我試圖下探前計數的div孩子，但它總是返回0

這裏是我的代碼：

function allowDrop(ev) { 
ev.preventDefault(); 
} 

function drag(ev) { 
ev.dataTransfer.setData("text", ev.target.id); 
    } 

function drop(ev) { 
ev.preventDefault(); 
var data = ev.dataTransfer.getData("text"); 
var kids = $(data > "div").length; 
alert(kids); 
ev.target.appendChild(document.getElementById(data)); 
}

我有一個週期產生了許多本的div（div的ID是管理）

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<br> 
<div id="<%=categoria_prato.id%>" draggable="true" ondragstart="drag(event)" style = "width:100px; height:25px">Ola</div>

來源

2016-05-24 Boltz0r

'$（資料> 「div」）。length;'不是一個有效的選擇器。這意味着'$（'＃'+ data +'> div'）。length;'？另外，如果您提供了一些HTML，那麼我們可以根據結構找出選擇器，這會很有幫助。 – Zach

我在跟隨教程。我想知道主div內是否有div。因爲如果這意味着它已經「選擇」，並且不能在 – Boltz0r

內部擁有另一個div，那麼請嘗試將選擇器更新爲我上面提供的選項，然後我們將從那裏開始。它應該轉換爲$（'＃mainDiv> div'），它將通過您的setData傳遞的id來查找div作爲主div的直接子節點。 – Zach

您的代碼的問題是，您正在檢查，以查看拖動div是否有子div div而不是drop div。該檢查應該在allowDrop中，如果它接受丟棄，它將設置ev.preventDefault（）。有更好的例子了那裏的阻力和下降，但這裏是一個基於您的方案爲例：

HTML

<div id="drop1" class="dropDiv" ondrop="drop(event)" ondragover="allowDrop(event)"> 
</div> 
<div id="drop2" class="dropDiv" ondrop="drop(event)" ondragover="allowDrop(event)"> 
</div> 
<div id="draggable1" draggable="true" class="dragDiv" ondragstart="drag(event)"> 
Drag me #1 
</div> 
<div id="draggable2" draggable="true" class="dragDiv" ondragstart="drag(event)"> 
Drag me #2 
</div>

function drop(ev) { 
    var id = ev.dataTransfer.getData("text"); 
    $('#' + id).appendTo(ev.target); 
} 
function allowDrop(ev) { 
    // Only check the parent div with id starting with drop and not the child div 
    if(ev.target.id.indexOf('drop') == 0) { 
    var count = $('#' + ev.target.id + ' > div').length; 
    if(count < 1) { 
     //allow the drop 
     ev.preventDefault(); 
    } 
    else 
    { 
     // NOPE 
    } 
    } 
} 
function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
}

https://jsfiddle.net/astynax777/dq3emchj/23/

來源

2016-05-24 14:26:26 Zach

我的小提琴試圖展示dragover和dragleave事件，但dragleave事件沒有發射，所以我只是放棄了它。 – Zach

拖放知道children.length

回答

相關問題