Question

举个例子，我做了一个jsFiddle，我可以拖动父元素和子元素。

HTML：

<div id='container'>
   <ul>
      parent1
      <li>child1</li>
      <li>child2</li>
      <li>child3</li>
   </ul>
   <ul>
      parent2
      <li>child1</li>
      <li>child2</li>
      <li>child3</li>
   </ul>
</div>

JS：

$("#container ul,li").draggable();

这里，当我拖动父元素时，子元素也随之拖动。我真正需要的是，将它们分开拖动。当我拖动父项时，单独的父元素应该拖动，当拖动子项时，应该单独拖动子元素。怎么可能？

请建议一种方法。

Answer 1

在没有它的孩子的情况下移动父母在大多数情况下没有意义，所以你可能找不到开箱即用的解决方案。

如果可以改变HTML，那么这样的东西可能适合你。

<强> HTML

<div id='container'>
    <ul>
        <li>parent1</li>
        <li style="list-style: none;">
            <ul>
                <li>child1</li>
                <li>child2</li>
                <li>child3</li>
            </ul>
        </li>
    </ul>
</div>

请注意<li>是<ul>唯一有效的孩子，但<ul>是<li>的有效孩子。

<强>的jQuery

$("#container ul li:first, #container ul li ul li").draggable();

以下是 JSFIDDLE 的结果。

分别拖放父元素和子元素

1 个答案: