javascript - 防止被拖动的 parent 的 child 点击事件

Question

我有一个这样的 UL 标签:

<ul ondrop="drop(event)" ondragover="allowDrop(event)">
    <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)">
        <div class="product-infos">
            <a href="javascript:;"></a>
        </div>
    </li>
</ul>

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

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

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

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

我希望能够将整个元素拖动到我点击的任何地方。我希望有一个解决方案。

Answer 1

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