jquery - 使用 connectwith 进行多重遏制

Question

我整个早上都在寻找答案，但没有找到任何答案。 我想要做的是拥有多个 div 容器，并在该 div 内有 2 个可排序项。

看起来像...

<div>
    <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
        <li>fourth item</li>
        <li>fifth item</li>
    </ul>
    <br />
    <ul>
        <li>6th</li>
        <li>7th</li>
        <li>8th</li>
    </ul>
</div>
<div>
    <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
        <li>fourth item</li>
        <li>fifth item</li>
    </ul>
    <br />
    <ul>
        <li>6th</li>
        <li>7th</li>
        <li>8th</li>
    </ul>
</div>

div 内的第二个 ul 将为空。他们会将他们的选择从第一个 ul 拖到它。但他们不能从不同的容器中拖动选项。 div 容器的数量也是动态的。我想知道这是否可以在 1 个脚本内完成，或者我是否必须执行多个脚本...

提前感谢您的帮助

Answer 1

我想不出如何构建一个脚本语句。所以我所做的就是根据打印每个选项的脚本所需的选项数量构建了一个 php 循环。可能不是最好的方法，但我不知道如何制作 1 个单一脚本。

这是我使用的代码。

for ($x = 0; $x <= RANDOM AMOUNT; $x++){
        echo '$(function() {      
            $( ".sortable'.$x.'" ).sortable({
               containment: "#c'.$x.'",
               connectWith: ".sortable'.$x.'",update:function(e,ui){
                    if (this === ui.item.parent()[0]) {
                    var order = $("#myList'.$x.'").sortable("serialize");

                    }
               }
            })
        });';

    }

希望这可以帮助某人或基于此的人可以想出更好的解决方案。