代码之家 › 专栏 › 技术社区 › Derek Adair

使一个类可以与其他名为相同的类排序,前提是它们是w/jquery的兄弟类

jquery-ui-sortable jquery javascript

Derek Adair · 技术社区 · 14 年前

澄清:

我正试图使portlet可排序,但试图将它们与任何属于兄弟的列连接起来。

我希望我的Web应用程序自动应用 jquery ui sortable 与全班所有学生互动 .column .

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

我需要柱子 connectWith 其他属于兄弟的列
我愿意 喜欢适用于任何 柱 动态生成的元素,我一直在寻找类似于我最喜欢的新玩具的东西, .live() ,无效…虽然自定义事件检测 柱 元素创建可能有效,但不确定如何进行。

前任:

标记

<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 可与其他列一起排序 容器1 ,但不是 container2 . 也在那些 集装箱2 W/ 集装箱2 但不是 容器1 .

2 回复 | 直到 14 年前

Community CDub 7 年前

据我所知,这比你做的容易。

对于容器中的可排序列,从您的标记来看,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>

Community CDub 7 年前

当将ID应用于父级时,此解决方案可以工作,我将查看是否无法装配更灵活的解决方案。

标记:

<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:

//connects with `#container1 .column` and `#container2 .column`
$('.column').sortable({
  connectWith: $(this).parent().attr('id') + ' .column'
});

配对

在 this question

(function ($) {
   jQuery.fn.liveDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
   };
})(jQuery);