javascript - 拖放认识 child .length

Question

我试图允许用户通过拖放来排序类别。我有一个代码可以工作，但它只是将一个 div 拖放到另一个 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>

Answer 1

您的代码的问题是您正在检查拖动的 div 是否有子 div 而不是放置的 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/