拖放taglist元素

Question

我需要你的帮助。我试图创建这样一个可下垂的taglist：

在这里输入图像描述

List元素(Parametr 1，Parametr 2，Parametr 3)是可拖动的，上面的字段'Tekst naglowka‘是可下垂的。我需要标签看起来像这个封闭的图像('Parametr 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()，只需附加字体-可怕的图标。