Drag'n'drop taglist elements

Question

我需要你的幫助。 我試圖創建一個可投放標記表是這樣的：

enter image description here

列表元素（Parametr 1，Parametr 2，Parametr 3）拖動和上述稱爲 'Tekst naglowka' 字段是可投放。我需要標籤在封閉的圖像上看起來像這樣（'參數1'最後'十字'）。

你有什麼想法嗎？

還有就是我的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()，只是它的附加字體真棒圖標。