Drag'n'dropタグリストの要素

Question

私はあなたの助けが必要です。 私はこのようなドロップ可能タグリストを作成しようとしています：

enter image description here

リスト要素（Parametr 1、Parametr 2、Parametr 3）がドラッグ可能であり、上記 'Tekst naglowka' と呼ばれるフィールドがドロップ可能です。私は、このように見えるようにタグが必要です（最後に 'Parametr 1'と 'Cross'が付いています）。

ご意見はありますか？

私のjsがあります：

$('ul li').draggable({ 
revert: true, 
helper: 'clone', 
revert: "invalid", 
cursor: "move" 
}); 

initDroppable($("#headerTextInput")); 

function initDroppable($elements) { 
$elements.droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-drop-hover", 
    accept: ":not(.ui-sortable-helper)", 
    over: function(event, ui) { 
    var $this = $(this); 
    }, 
    drop: function(event, ui) { 
    var $this = $(this); 
    $("#headerTextInput p").remove(); 
    $("#headerTextInput").focus(); 
    $("<div class='dropped'></div>").text(ui.draggable.text()).appendTo(this); 
    $(".dropped").append("<i class='droppedCross fa fa-times' aria-hidden='true'></i>"); 
    if (this.children.length > 0) { 
     return false; 
    } 
    } 
});} 

$("#headerTextInput").sortable(); 

そして、私のhtml：

<label class="headerTextLabel" for="headerTextInput">Tekst nagłówka</label> 
    <div id="headerTextInput" tabindex="0"><p>Dodaj tekst...</p></div> 

    <div class="addParameterButton"> 
     DODAJ PARAMETR 
    </div> 

    <ul class="parametersList"> 
     <li id="Parameter 1" class="listElement">Parametr 1</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i> 
     <li id="Parameter 2" class="listElement">Parametr 2</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i> 
     <li id="Parameter 3" class="listElement">Parametr 3</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i> 
    </ul> 

私はタグを例囲まれたように見えるように何ができますか？私は - 各ドロップの後にタグの最後に十字架をつけていますか？

ありがとうございます！

Answer 1

この

$('ul li').draggable({ 
 
    revert: true, 
 
    helper: 'clone', 
 
    revert: "invalid", 
 
    cursor: "move" 
 
}); 
 

 
initDroppable($("#headerTextInput")); 
 

 
function initDroppable($elements) { 
 
    $elements.droppable({ 
 
    activeClass: "ui-state-default", 
 
    hoverClass: "ui-drop-hover", 
 
    accept: ":not(.ui-sortable-helper)", 
 
    over: function(event, ui) { 
 
     var $this = $(this); 
 
    }, 
 
    drop: function(event, ui) { 
 
     var $this = $(this); 
 
     $("#headerTextInput p").remove(); 
 
     $("#headerTextInput").focus(); 
 
     $("<div class='dropped'></div>").html(ui.draggable.text()+"<i class='droppedCross fa fa-times' aria-hidden='true'></i>").appendTo(this); 
 
     
 
     if (this.children.length > 0) { 
 
     return false; 
 
     } 
 
    } 
 
    }); 
 
} 
 

 
$("#headerTextInput").sortable();

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<label class="headerTextLabel" for="headerTextInput">Tekst nagłówka</label> 
 
<div id="headerTextInput" tabindex="0"> 
 
    <p>Dodaj tekst...</p> 
 
</div> 
 

 
<div class="addParameterButton"> 
 
    DODAJ PARAMETR 
 
</div> 
 

 
<ul class="parametersList"> 
 
    <li id="Parameter 1" class="listElement">Parametr 1</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i> 
 
    <li id="Parameter 2" class="listElement">Parametr 2</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i> 
 
    <li id="Parameter 3" class="listElement">Parametr 3</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i> 
 
</ul>

利用.html()の代わり.text()を試してみて、それでフォント素晴らしいアイコンを追加します。