javascript - 使一个类可与其他同名类排序，前提是它们是 w/jquery 的兄弟类

Question

澄清:

我正在尝试使 portlet 可排序，但尝试将它们与任何同级列连接

<小时/>

我希望我的网络应用程序自动应用 jquery ui sortable与类 .column 的所有 div 进行交互。

在这个解决方案中我需要两个小技巧，不，它不像 $(".column").sortable()...

1. 我需要这些列来连接任何其他同级列
2. 我想要解决方案应用于动态生成的任何 .column 元素，我一直在寻找类似于我最喜欢的新玩具的东西, .live() ，无济于事...尽管检测 .column 元素创建的自定义事件可能有效，但不确定如何做到这一点。

例如:

标记

<div id="container1" class="column-container">
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
</div>

javascript

$(document).ready(function(){
  $columns = $(".column");
  $columns.sortable({
    connectWith: $columns.parent().find('.column')  //this untested, but you get the idea... i'll write back with the results of this, might be some good direction
  });
});

<小时/>

我希望 container1 中的列可以与 container1 中的其他列一起排序，但不能与 container2 中的其他列一起排序。还有 container2 中包含 container2 但不包含 container1 的内容。

Answer 1

据我了解，这比您做的要容易。

对于容器内的可排序列，根据您的标记，jquery 激活将是:

$('.column-container').sortable();

当前可排序的选择器实际上会使 portlet 可排序。

关于现场事件，请参阅之前的问题: live drag and drop

编辑:

在您发表评论后，选择器将是:

$('.column-container').sortable({items: '.portlet'});

编辑2: 由于它在这里仍然不起作用，所以完整的示例是:

    <style type="text/css">
        .column-container { width: 100%; }
        .column-container .column { float: left; width: 100px; background: #ccc; margin-left: 10px; }
        .column-container .column .portlet { border: 1px solid black; padding: 2px; margin: 2px; }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.column-container').sortable({items: '.portlet'});
        });
    </script>
    <div id="container1" class="column-container">
        <div class="column">
            <div class="portlet">#container1 .column[0] .portlet[0]</div>
            <div class="portlet">#container1 .column[0] .portlet[1]</div>
            <div class="portlet">#container1 .column[0] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container1 .column[1] .portlet[0]</div>
            <div class="portlet">#container1 .column[1] .portlet[1]</div>
            <div class="portlet">#container1 .column[1] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container1 .column[2] .portlet[0]</div>
            <div class="portlet">#container1 .column[2] .portlet[1]</div>
            <div class="portlet">#container1 .column[2] .portlet[2]</div>
        </div>
    </div>
    <div style="clear:both"></div><br />
    <div id="container2" class="column-container">
        <div class="column">
            <div class="portlet">#container2 .column[0] .portlet[0]</div>
            <div class="portlet">#container2 .column[0] .portlet[1]</div>
            <div class="portlet">#container2 .column[0] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container2 .column[1] .portlet[0]</div>
            <div class="portlet">#container2 .column[1] .portlet[1]</div>
            <div class="portlet">#container2 .column[1] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container2 .column[2] .portlet[0]</div>
            <div class="portlet">#container2 .column[2] .portlet[1]</div>
            <div class="portlet">#container2 .column[2] .portlet[2]</div>
        </div>
    </div>