如何使用 Jquery 执行拖放操作？

Question

我想做拖放。我从这个Jquery Link 得到了这个想法。

如果我在不更改任何内容的情况下应用相同的代码，我的代码也可以正常工作。现在我想更改 UI 标签的 ID 名称。更改后，拖放不起作用。

这是我的代码

Aspx 代码

$(function() {
  $("#ColumnNamesSortable, #sortable2").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
});

#ColumnNamesSortable,
#sortable2 {
  border: 1px solid #846868;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}

#ColumnNamesSortable li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px!important;
  font-size: 0.9em;
  width: 155px;
}

<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.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<ul id="ColumnNamesSortable" class="connectedSortable"> //change id name from sortable1 to ColumnNamesSortable (not working)
  <li class="ui-state-default">StoreID</li>
  <li class="ui-state-default">ItemLookupCode</li>
  <li class="ui-state-default">ExtendedDescription</li>
  <li class="ui-state-default">SubDescription1</li>
  <li class="ui-state-default">Department</li>
  <li class="ui-state-default">Category</li>
  <li class="ui-state-default">SupplierCode</li>
  <li class="ui-state-default">SupplierName</li>
  <li class="ui-state-default">TotalQuantity</li>
  <li class="ui-state-default">ExtendedPrice</li>
  <li class="ui-state-default">ExtendedCost</li>
  <li class="ui-state-default">Profit</li>
  <li class="ui-state-default">UnitOfMeasure</li>
  <li class="ui-state-default">CustomerAccountNumber</li>
  <li class="ui-state-default">CustomerName</li>
</ul>
<br />
<ul id="sortable2" class="connectedSortable"> // this one is working
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

我想创建四个拖放。例如

1. ColumnNamesSortable

2. DataField

3. ColumnField

4. RowField

为什么当我更改特定标签的 ID 名称时它不起作用。并且它不会在控制台上显示任何错误。

Answer 1

这是一个工作示例。任何可排序的li 都可以拖放到另一个中。

只需将所有 id 添加到选择器并实例化 sortable。

$("#ColumnNamesSortable, #sortable2, #ColumnField, #RowField").sortable({

工作示例：

$(function() {
  $("#ColumnNamesSortable, #sortable2, #ColumnField, #RowField").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
});

li {
  list-style: none;
  padding: 2px 5px;
  margin-bottom: 8px;
  cursor: pointer;
}

<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.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<ul id="ColumnNamesSortable" class="connectedSortable">
  <li class="ui-state-default">StoreID</li>
  <li class="ui-state-default">ItemLookupCode</li>
  <li class="ui-state-default">ExtendedDescription</li>
  <li class="ui-state-default">SubDescription1</li>
  <li class="ui-state-default">Department</li>
  <li class="ui-state-default">Category</li>
  <li class="ui-state-default">SupplierCode</li>
  <li class="ui-state-default">SupplierName</li>
  <li class="ui-state-default">TotalQuantity</li>
  <li class="ui-state-default">ExtendedPrice</li>
  <li class="ui-state-default">ExtendedCost</li>
  <li class="ui-state-default">Profit</li>
  <li class="ui-state-default">UnitOfMeasure</li>
  <li class="ui-state-default">CustomerAccountNumber</li>
  <li class="ui-state-default">CustomerName</li>
</ul>
<br />
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
<br />
<ul id="ColumnField" class="connectedSortable">
  <li class="ui-state-highlight">ColumnField 1</li>
  <li class="ui-state-highlight">ColumnField 2</li>
  <li class="ui-state-highlight">ColumnField 3</li>
  <li class="ui-state-highlight">ColumnField 4</li>
  <li class="ui-state-highlight">ColumnField 5</li>
</ul>
<br />
<ul id="RowField" class="connectedSortable">
  <li class="ui-state-highlight">RowField 1</li>
  <li class="ui-state-highlight">RowField 2</li>
  <li class="ui-state-highlight">RowField 3</li>
  <li class="ui-state-highlight">RowField 4</li>
  <li class="ui-state-highlight">RowField 5</li>
</ul>