jquery - 带有连接的多个容器

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");

                    }
               }
            })
        });';

    }

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