Question

我尝试允许用户通过拖放来订购类别。我有一个代码工作，但它只是拖动并将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而不是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/

拖放了解children.length

1 个答案: