Question

我有这样的UL标签：

<script>
    function allowDrop(event) {
        event.preventDefault();
    }
    function dragStart(event) {
        event.dataTransfer.setData("Text", event.target);
    }
    function dragging(event) {

    }
    function drop(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
</script>

我希望能够拖动整个LI元素并拖动到另一个UL元素。使用javascript代码：

{{1}}

问题是，有时用户点击“div”元素，其他人点击“a”元素。因此，大多数情况下，拖动失败，因为我将错误的子项附加到UL元素。我收到错误：

未捕获的TypeError：无法在'Node'上执行'appendChild'：参数1不是'Node'类型。

我希望能够在任何地方拖动整个元素。我希望有一个解决方案。

Answer 1

我相信如果您使用event.currentTarget而不是event.target，您可能会找到解决方案。试试吧

Answer 2

使用jquery ui sortable，我已经将你的HTML留下了ondrag等，但是你不需要它们

$(function() {
     $(function() {
         $( "ul" ).sortable({
            connectWith: "ul"
         });
         $( "ul").sortable({
            connectWith: "ul",
            dropOnEmpty: false
         });

      });
  });

ul{background-color:red;}
li{background-color:blue;}
a{background-color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul ondrop="drop(event)" ondragover="allowDrop(event)">ul
    <li class="item">li
        <div class="product-infos">div
            <a href="javascript:;" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)">link</a>
        </div>
    </li>
  <li class="item">li
        <div class="product-infos">div
            <a href="javascript:;" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)">link</a>
        </div>
    </li>
</ul>
<ul ondrop="drop(event)" ondragover="allowDrop(event)">ul
    <li class="item">li
        <div class="product-infos">div
            <a href="javascript:;" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)">link</a>
        </div>
    </li>
  <li class="item">li
        <div class="product-infos">div
            <a href="javascript:;" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)">link</a>
        </div>
    </li>
</ul>

防止被拖动的父项的子项上的单击事件

2 个答案: