使用jQuery UI

Question

我有一个带有jQuery UI sortables的网格。它分为两个层次。

将元素（.sortable-cell）从第2级拖动到第1级后，会在其周围创建一个包装器。

<li class="sortable-table">                                 <-- wrapper
    <ul class="sortable-row connectedSortable ui-sortable"> <-- wrapper
        <li class="sortable-cell">Item 5</li>               
    </ul>                                                   <-- wrapper
</li>                                                       <-- wrapper

问题是在新创建的可排序对象上没有调用sortable()，并且无法正确识别它。然后无法正确拖动第二级元素（.sortable-cell）并拖动整行（.sortable-row）。

如何在新创建的可排序项上动态调用sortable()并再次传递所有参数？

$('.sortable-grid, .sortable-row').sortable({
  connectWith: '.connectedSortable',
  start: function(event, ui) {
    sender = $(this);
    recvok = false;
  },
  over: function(event, ui) {
    recvok = ($(this).not(sender).length != 0);
  },
  stop: function(event, ui) {
    if (!recvok) {
      $(this).sortable('cancel');
    }
    item = $(ui.item);
    receiver = $(ui.item.parent());
    console.log(item);
    console.log(receiver);
    if (item.hasClass('sortable-cell') && receiver.hasClass('sortable-grid')) {
    	item.wrap("<li class='sortable-table'><ul class='sortable-row connectedSortable ui-sortable'></ul></li>");
    }
  }
});

.sortable-table {
  border: 1px red solid;
  padding: 10px 0px;
  list-style-type: none;
  width: 100% !important;
  display: table !important;
}

.sortable-table .sortable-row {
  height: 100% !important;
  display: table-row !important;
  padding: 5px 0px;
}

.sortable-table .sortable-cell {
  border: 1px solid green;
  display: table-cell !important;
  cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
<ul class="sortable-grid connectedSortable">
  <li class="sortable-table">
    <ul class="sortable-row connectedSortable">
      <li class="sortable-cell">Item 1</li>
      <li class="sortable-cell">Item 2</li>
      <li class="sortable-cell">Item 3</li>
    </ul>
  </li>
  <li class="sortable-table">
    <ul class="sortable-row connectedSortable">
      <li class="sortable-cell">Item 4</li>
      <li class="sortable-cell">Item 5</li>
      <li class="sortable-cell">Item 6</li>
    </ul>
  </li>
</ul>

Answer 1

解决方案是将参数存储到变量sortableParameters中，然后在每次调用时将其传递给sortable()方法。

＆＃13;

＆＃13;

var sortableParameters = {
  connectWith: '.connectedSortable',
  start: function(event, ui) {
    sender = $(this);
    recvok = false;
  },
  over: function(event, ui) {
    recvok = ($(this).not(sender).length != 0);
  },
  stop: function(event, ui) {
    if (!recvok) {
      $(this).sortable('cancel');
    }
    item = $(ui.item);
    receiver = $(ui.item.parent());
    console.log(item);
    console.log(receiver);
    if (item.hasClass('sortable-cell') && receiver.hasClass('sortable-grid')) {
      item.wrap("<li class='sortable-table'><ul class='sortable-row connectedSortable ui-sortable'></ul></li>").parent().sortable(sortableParameters);
    }
  }
}
$('.sortable-grid, .sortable-row').sortable(sortableParameters);

＆＃13;

.sortable-table {
  border: 1px red solid;
  padding: 10px 0px;
  list-style-type: none;
  width: 100% !important;
  display: table !important;
}
.sortable-table .sortable-row {
  height: 100% !important;
  display: table-row !important;
  padding: 5px 0px;
}
.sortable-table .sortable-cell {
  border: 1px solid green;
  display: table-cell !important;
  cursor: move;
}
.sortable-table .sortable-cell p {
  display: inline;
  margin: 0 !important;
}
.sortable-table .highlight-vertical {
  width: 5px !important;
  display: table-cell !important;
  background-color: blue !important;
}
.sortable-table .highlight-horizontal {
  height: 5px !important;
  width: 100% !important;
  display: block !important;
  background-color: blue !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
<ul class="sortable-grid connectedSortable">
  <li class="sortable-table">
    <ul class="sortable-row connectedSortable">
      <li class="sortable-cell">Item 1</li>
      <li class="sortable-cell">Item 2</li>
      <li class="sortable-cell">Item 3</li>
    </ul>
  </li>
  <li class="sortable-table">
    <ul class="sortable-row connectedSortable">
      <li class="sortable-cell">Item 4</li>
      <li class="sortable-cell">Item 5</li>
      <li class="sortable-cell">Item 6</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;