それは別のリスト

Question

に追加された後、私はそうのような順序なしリスト持っ順不同リストにリスト項目にHTMLを追加：

時折

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

を、私はこれにsortable1からリスト項目をドラッグするつもりですsortable2は、このようにそれを修正する：

<ul id="sortable2" class="connectedSortable"> 
     <li class="ui-state-default">First</li> 
     <li class="ui-state-default">Second</li> 
     <li class="ui-state-default">Third</li> 
</ul> 

私の質問は、私がかつてsortable2にドラッグこれらのリスト項目内の次のHTMLを追加することができる方法である。

<a title='delete' class="itemDelete"><i class="fa fa-minus-circle" aria-hidden="true"></i></a> 

私はjqueryを使用したいと思いますが、これまではULのDOMツリーに追加して追加しようとしましたが、ひどく間違っています。どんな助けもありがとうございます。

Answer 1

問題の実行例を利用可能にすると、このような場合に役立ちます。 jQuery UIとjQuery Sortableを使用していると推測しています。

ソート可能な「受信」イベントを使用して、変更された要素にHTMLを追加できます。

$("#sortable1, #sortable2").sortable({ 
 
    connectWith: ".connectedSortable", 
 
    receive: function(event, ui) { 
 
    $(ui.item).append('<a title="delete" class="itemDelete"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>'); 
 
    } 
 
}).disableSelection();

#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; 
 
}

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

 
<ul id="sortable1" class="connectedSortable"> 
 
    <li class="ui-state-default">Item 1</li> 
 
    <li class="ui-state-default">Item 2</li> 
 
    <li class="ui-state-default">Item 3</li> 
 
    <li class="ui-state-default">Item 4</li> 
 
    <li class="ui-state-default">Item 5</li> 
 
</ul> 
 

 
<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>

はまた、jQueryのUIの両方 Sortableと Draggableに関する豊富な文書を持っている、あなたはあなたを助けるより多くの情報についてはイベントセクションをチェックしてください。