如何使用MooTools的Sortable插件包含要拖动的DOM元素的所有子项？ [英] How do I include all children of a DOM element to be dragged using the Sortable plugin for MooTools?

问题描述

我使用 mootools-more.1817.js ...这是我的HTML结构：

I am using mootools-more.1817.js...this is my HTML structure:

<ul id="categories">
  <div id="admin">Admin Controls</div>
    <li class="selected"><a href="#">Test</a>
        <ul>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Test 2</a>
        <ul>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Top Links</a>
        <ul>
            <li id="article"><a href="/1">Link 1</a></li>
            <li id="article"><a href="/3">Link 2</a></li>
            <li id="article"><a href="/2">Link 3</a></li>
            <li id="article"><a href="/4">Link 4</a></li>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Lame Links</a>
        <ul>
            <li id="article"><a href="/9">Link 9</a></li>
            <li id="article"><a href="/10">Link 10</a></li>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Awesome Links</a>
        <ul>
            <li id="article"><a href="/11">Link 11</a></li>
            <li id="article"><a href="/12">Link 12</a></li>
        </ul>
    </li>
</ul>

所以我想做两件事：

1. 可以将每个 li 项拖到另一个部分，并使其拥有其所有子项。例如。如果我拖动了具有顶部链接链接的li，我不仅要拖动顶部链接还包括 div＃admin ， ul 和 li 是该父项 li 的子项。基本上每个 li 的所有子级。


2. 我也希望能够在子级列表之间拖动项。例如，假设我想将链接2 从 ul 拖动到 Awesome Links ，并将其放在链接链接11 和链接12 / li>
   

1. Be able to drag each li item to another section and have it take all its children with it. E.g. if I am dragging the li that has the link Top Links, I want to drag not only the words Top Links, but also the div#admin, ul and li that are children of that parent li. Essentially all the children of each li.
2. I would also like to be able to drag items between lists of the children. So for instance, say I want to drag the link Link 2 from that ul to the section called Awesome Links and drop it between the links Link 11 and Link 12.

我这样做了：

window.addEvent('domready', function(){
    new Sortables('#categories', {
        clone: true,
        revert: true,
        opacity: 0.7  
    });
});

这是什么拖动JUST li ，而不是 li 的孩子。

What that does is drags JUST the li, and not the children of the li.

如何实现这些？

感谢。

推荐答案

首先，您有 div 类别列表中不在 li 标签中的项 ul 的唯一直接孩子可以是 li 作为有效列表。

First, you have invalid HTML by having div items in your categories list that are not in li tags themselves. The only immediate children to a ul can be li for a valid list.

其次，根据文档，要启用列表之间的排序，一个或多个列表或id必须使用数组或选择器传递（http://mootools.net/docs/more/Drag / Sortables）。这意味着，要在子列表之间移动项目，必须将每个 ul 传递到可排序组（与类别组不同）。这应该可以解决你的问题＃2。

Second, according to the documentation, "To enable sorting between lists, one or more lists or id's must be passed using an array or a selector" (http://mootools.net/docs/more/Drag/Sortables). That means, to move items between your sublists, each ul must be passed into a sortables group (different than the categories group). This should solve your issue #2.

我不知道为什么它不会拖动 li ，虽然可能是无效的HTML导致问题。

I'm not yet sure why it would not drag the whole contents of the li, though it may be the invalid HTML is causing issues.

这篇关于如何使用MooTools的Sortable插件包含要拖动的DOM元素的所有子项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！