jQuery UI在列表之间可排序和移动的元素

deen 发表于 Dev

迪恩

我想从列表中获取项目并将其拖动到其他空白列表。

这是HTML结构：

<div class="structure">
  <div id="row1" class="connected"></div>
  <div id="row2" class="connected">
    <div class="item">Item 1</div>
  </div>
  <div id="row3" class="connected"></div>
  <div id="row4" class="connected">
    <div class="item">Item 2a</div>
    <div class="item">Item 2b</div>
    <div class="item">Item 2c</div>
  </div>
  <div id="row5" class="connected"></div>
  <div id="row6" class="connected">
    <div class="item">Item 3a</div>
    <div class="item">Item 3b</div>
  </div>
  <div id="row7" class="connected"></div>
</div>

<ul>您可以在其中放置任何项目的空白处。之后，它将<ul>在拖曳其他项目之前和之后创建新的空白处。

这是我的JavaScript

$( function() {
  $(".structure div").sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".connected",
    items:       "> div",

    receive:     function (event, ui) {

      var targetRowID = $(this).attr("id");
      var itemsTargetRow = $("#"+ targetRowID +" .item").length;

      if( itemsTargetRow == 1 ) {
        function uniqueID() {
          return Math.random().toString(36).substr(2, 5);
        };

        $("#"+ targetRowID)
          .before('<div id="row'+ uniqueID() +'" class="connected"></div>')
          .after('<div id="row'+ uniqueID() +'" class="connected"></div>');
      }
    },

    stop: function (event, ui) {

      var fromRow = $(this).attr("id");
      var isRowEmpty = $("#"+ fromRow +" .item").length;

      if( isRowEmpty == 0 )
      {
        $("#"+ fromRow).next().remove();
        $("#"+ fromRow).remove();
      }
    }
  }).disableSelection();
});

问题：

当我将一个项目放到一个空列表中时，我不能再将该项目拖到其他任何地方。

有任何想法吗？

尼尔斯·坦纳（Niles Tanner）

好的，这是你的问题

jQuery从页面加载开始，并找到所有要“连接”的区域。当您添加更多div时，JQuery不会意识到存在允许拖放的新区域。

解决方案？您需要刷新JQuery，如下所示：

var refresh = function(){
   $( function() {
  $(".structure div").sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".connected",
    items:       "> div",

    receive:     function (event, ui) {

      var targetRowID = $(this).attr("id");
      var itemsTargetRow = $("#"+ targetRowID +" .item").length;

      if( itemsTargetRow == 1 ) {
        function uniqueID() {
          return Math.random().toString(36).substr(2, 5);
        };

        $("#"+ targetRowID)
          .before('<div id="row'+ uniqueID() +'" class="connected"></div>')
          .after('<div id="row'+ uniqueID() +'" class="connected"></div>');
         refresh();
      }
    },

    stop: function (event, ui) {

      var fromRow = $(this).attr("id");
      var isRowEmpty = $("#"+ fromRow +" .item").length;

      if( isRowEmpty == 0 )
      {
        $("#"+ fromRow).next().remove();
        $("#"+ fromRow).remove();
      }
    }
  }).disableSelection();
}); 
}

这是一个进行中的示例：http : //codepen.io/nilestanner/pen/grJJmJ

您还可以查看以下答案以获取更多帮助：使用jQuery UI可排序插件添加项目后刷新列表

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。