拖放了解children.length(Drag and Drop Knowing children.length)

拖放了解children.length(Drag and Drop Knowing children.length)

我试图允许用户通过拖放来订购类别。 我有一个代码工作，但它只是拖动并将div放入另一个，我需要确保是否有一个div已经他切换而不是下降但我有很多问题。

我试图在丢弃之前计算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>

I'm trying to allow users to order categories by dragging and dropping. I have a code working but it just drags and drop a div into another, I need to make sure if there's a div there already he switches instead of dropping but I'm having a lot of problems.

I tried to count the children of the div before dropping but it always returns 0.

Here's my code:

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)); }

I have a cycle generating a number of this divs (div's id is managed)

<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>

最满意答案

你的代码的问题是你正在检查拖动div是否有子div而不是drop div。 检查应该在allowDrop中，如果它接受drop，将设置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>

JS

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/

The problem with your code was that you were checking to see if the dragging div had child divs rather than the drop div. The check should be in the allowDrop which will set ev.preventDefault() if it will accept drops. There are much better examples out there for drag and drops but here is an example based on your scenario:

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>

JS

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/