Question

HTML

    <div id="participants" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:400px; min-height:300px; display:inline; float:left; border: 1px solid black;">
        <h3 style="margin:10px;">Participants</h3>
    </div>



    <div id="users" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:400px; min-height:300px; float:right; border: 1px solid black;" >

<p class="draggable" draggable="true" ondragstart="drag(event)" ondrop="return false;" >draggable content</p>
    </div>

的Javascript

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

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

drop = function(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    if (data) {
        var childElement = document.getElementById(data);
        if (childElement) {
            ev.target.appendChild(childElement);
        }
    }
}

以下代码工作正常，但我只希望将事物从一个div移动到另一个div。现在你也可以把p放在另一个p里面（即使我试图用ondrop =＆＃34来阻止它;返回false;＆＃34;）。

如何在其他p标签内禁用p标签？注意：可拖动元素由jQuery.html方法

插入

Answer 1

我的临时解决方案是在删除之前检查类（将类可放置到2个div：用户和参与者）

drop = function(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            if (data) {
                var childElement = document.getElementById(data);
                if (childElement) {
                    if($(ev.target).hasClass( "droppable" ))    {           //Only allow drop inside the 2 divs
                        ev.target.appendChild(childElement);
                    }
                    if($(ev.target).hasClass( "draggable" ))    {           //put in parent when dropped on draggable
                        console.log('$(ev.target).parent()', $(ev.target).parent());
                        $(ev.target).parent()[0].appendChild(childElement);
                    }
                    return false;
                }
            }
        }

Answer 2

我遇到了同样不需要的行为。我以这种方式解决了这个问题：

if (ev.target.nodeName == 'LI') {
  $(ev.target).after(draggedNode);
} else {
  $(ev.target.closest('li')).after(draggedNode);
}

此代码假设DOM结构类似于此，其中所需的drop target是列表项，而不需要的drop target是span：

...
  <li>
    <span></span>
  </li>
  <li>
    <span></span>
  </li>
...

禁用div中孩子的丢弃（Html5拖放）

2 个答案: