javascript - 拖放标签列表元素

Question

我需要你的帮助。我正在尝试创建一个可放置的标签列表，如下所示:

enter image description here

列表元素(参数 1、参数 2、参数 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()，并在其后附加很棒的字体图标。