ドラッグアンドドロップで特定のアイテムだけを移動するには？

私はすべての項目をdivに移動したくありません。私は私が唯一UL の最初の要素は、他のULもすべての要素にをStoreID移動する別のドラッグアンドドロップで特定のアイテムだけを移動するには？

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Sortable - Connect lists</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #sortable1, #sortable2 { 
    border: 1px solid #eee; 
    width: 142px; 
    min-height: 20px; 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0 0 0; 
    float: left; 
    margin-right: 10px; 
    } 
    #sortable1 li, #sortable2 li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
    }); 
    </script> 
</head> 
<body> 

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">StoreID</li> // I want to move only this STOREID li element to another UL 
    <li class="ui-state-default">ItemLookupCode</li> 
    <li class="ui-state-default">ExtendedCost</li> 
    <li class="ui-state-default">Quantity</li> 
    <li class="ui-state-default">Price</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 

</ul> 


</body> 
</html>

にのみ、特定の項目フォームを一件のdivを移動したいと考えています。それを達成する方法。

おかげ

出典

2017-03-11 mohamed hafil

あなたはstoreIdだけが別のulに移動されることを意味します。 – rahulsm

@rahul_mはい。私は別の '＃sortable3' idを持っています。そこには'＃sortable1'から 'extendedCost、Quantity、Price'だけを削除することができなければなりません。 –

@mohamedhafilあなたのリクエストは奇妙です。 1つのアイテムだけをドラッグしたい場合、なぜlist1をソート可能にするのですか？または、リスト1とリスト2の両方をソートできるはずですが、StoreIDだけをリスト2に移動できますか？ – Twisty

は、これは最高のupdateまたはreceiveコールバックを使用して行われます。キーはui.sender.sortable("cancel");です。変更を元に戻します。

実施例：https://jsfiddle.net/Twisty/4f5yh3pa/

HTML

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default acceptable">StoreID</li> 
    <li class="ui-state-default">ItemLookupCode</li> 
    <li class="ui-state-default">ExtendedCost</li> 
    <li class="ui-state-default">Quantity</li> 
    <li class="ui-state-default">Price</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
</ul>

CSS

.connectedSortable { 
    border: 1px solid #eee; 
    width: 142px; 
    min-height: 20px; 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0 0 0; 
    float: left; 
    margin-right: 10px; 
} 

#sortable1 { 
    background: #fff; 
} 

#sortable2 { 
    background: #999; 
} 

.connectedSortable li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
}

はJavaScript

$(function() { 
    $(".connectedSortable").sortable({ 
    connectWith: ".connectedSortable", 
    update: function(e, ui) { 
     if ($(e.target).attr("id") == "sortable2") { 
     if (ui.item.hasClass("acceptable")) { 
      console.log($(this).attr("id") + " accepted item: ", ui.item); 
     } else { 
      console.log($(this).attr("id") + " rejected item: ", ui.item); 
      ui.sender.sortable("cancel"); 
     } 
     } 
    } 
    }).disableSelection(); 
});

ドラッグ可能に見せたい場合はアニメーションできます。

出典

2017-03-13 20:06:11 Twisty

もっとフラッシュされたもの：https://jsfiddle.net/Twisty/4f5yh3pa/6/ – Twisty

ドラッグアンドドロップで特定のアイテムだけを移動するには？

答えて

関連する問題