Jqueryを使用してドラッグ＆ドロップを実行する方法は？

Question

ドラッグアンドドロップしたい。私はこのJquery Linkからアイデアを得ました。

何も変更せずに同じコードを適用すると、私のコードも正常に動作します。今私はのUIタグのID名を変更したいと思います。一度変更してしまえば、ドラッグ＆ドロップは機能しません。ここで

は、私は4つのドラッグ＆ドロップを作成したい私のコード

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>