JQuery可排序嵌套的可排序div

Question

JQuery可排序嵌套的可排序div

Ant*_*ado 8 javascript jquery nested jquery-ui jquery-ui-sortable

这个问题与这个Nest jQuery UI sortables有关,但我无法解决我的问题.

这是问题所在:我有一个包含项目的主容器,这些项目是可以是未分组项目或组的div,其中包含其他项目.我可以通过拖动.multiply-groupdiv 来定义新组,然后我可以一次拖动所有组.这是代码:

    <body>
    <div class="multiply-container">
        <div class="row multiply">Item 1</div>
        <div class="row multiply">Item 2</div>
        <div class="row multiply">Item 3</div>
        <div class="row multiply-group"> Group 1</div>
        <div class="row multiply">Item 4</div>
        <div class="row multiply-group"> Group 2 </div>
        <div class="row multiply">Item 5</div>
    </div>

    <script>

        var groupWrap = function(){

            $('.multiply-container').children().each(function(index, item){
                if($(item).hasClass('multiply-group')){
                    $(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>');
                }
            });

        };

        var updateMultiply = function(){

            var $container = $('.multiply-container');

            $container.children().each(function(index, item){
                if($(item).hasClass('locked')){
                    $(item).children().each(function(i, elem){

                        $container.append($(elem));

                    });
                    $(item).remove();
                }


            });

            groupWrap();

            $('.multiply-container').sortable({
                connectWith: '.locked',
                helper: 'clone',
                placeholder: '.multiply-placeholder',
                axis: 'y',
                update: function(){
                    updateMultiply();
                }
            });

            $('.locked').sortable({
                connectWith: '.multiply-container, .locked',
                helper: 'clone',
                axis: 'y',
                update: function(){
                    updateMultiply();
                },
                receive: function(event, ui){

                    if($(ui.item).hasClass('locked')){
                        $(ui.sender).sortable('cancel');

                        return false;
                    }

                }
            });

        };




        updateMultiply();

    </script>

</body>

Run Code Online (Sandbox Code Playgroud)

这里有一个小提琴:https://jsfiddle.net/antoq/n1w6e6ar/2/

问题是我得到的是当我将最后一个组容器拖出主容器的底部时,它停在那里而不是回到主容器,我得到以下错误:

Uncaught HierarchyRequestError:无法在'Node'上执行'insertBefore':新的子元素包含父元素.

有人可以帮我理解发生了什么以及如何解决它？

Answer 1

Tom*_*ler 4

也许您在编写代码时想得太多了：两个可排序、不必要的事件取消、连接已连接的列表等。

最后一组卡在底部或消失的问题似乎是.sortable()在每次列表更新时重新附加的问题，这种反复出现会导致意外的行为。但简单地删除重复出现的情况会使您的列表不像您预期的那样运行，因此需要进行一些额外的重构：

1) 仅使用一次.sortable()调用，然后定义哪些项目可排序（即.row和.locked分别用于单独排序和分组排序）。这已经足够满足您的意图了。这里唯一的问题是，将一个组拖到另一个组的中间会增加另一个嵌套级别；

2) 为了防止额外的嵌套级别，请.locked在再次包装之前先将组展开。

var groupWrap = function() {
  $('.locked').children().unwrap();
  $('.multiply-container')
    .children().each(function(index, item) {
      if ($(item).hasClass('multiply-group')) {
        $(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>');
      }
    });
};

var updateMultiply = function() {

  var $container = $('.multiply-container');

  $container.children().each(function(index, item) {
    if ($(item).hasClass('locked')) {
      $(item).children().each(function(i, elem) {

        $container.append($(elem));

      });
      $(item).remove();
    }
  });
};

$('.multiply-container').sortable({
  items: '.row, .locked',
  helper: 'clone',
  axis: 'y',
  update: function() {
    update();
  }
});

var update = function() {
  updateMultiply();
  groupWrap();
};

update();

Run Code Online (Sandbox Code Playgroud)

body {
   background-color: #eee;
   padding: 50px;
 }
 .multiply {
   height: 45px;
   width: 100%;
   background-color: violet;
   border: 1px solid purple;
   margin: 0 auto;
   text-align: center;
 }
 .multiply-group {
   height: 25px;
   width: 100%;
   background-color: teal;
   border: 2px solid orange;
   margin: 0 auto;
   text-align: center;
 }
 .multiply-container {
   background-color: lime;
   padding: 20px;
 }
 .multiply-placeholder {
   height: 65px;
   width: 100%;
 }
 .locked {
   padding: 20px;
   background-color: cyan;
   border: 1px solid blue;
 }

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<body>
  <div class="multiply-container">
    <div class="row multiply">Item 1</div>
    <div class="row multiply">Item 2</div>
    <div class="row multiply">Item 3</div>
    <div class="row multiply-group">Group 1</div>
    <div class="row multiply">Item 4</div>
    <div class="row multiply-group">Group 2</div>
    <div class="row multiply">Item 5</div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	1307 次
最近记录：	9 年，7 月前