如何在每个元素拖放后创建一个类？

Question

我正在努力建立一个像这样工作的系统：你可以选择列表的5个元素来拖放到一个特殊的地方。丢弃后，会出现一个弹出窗口，询问您要更改元素的内容。然后修改的元素出现在特殊的地方。

它可以工作一次，但如果你想添加另一个元素，这个新元素将删除旧元素取代它。

我正在尝试在每次删除某些内容时添加一个类，以便不会删除任何内容（因此您将拥有名为dropped1，dropped2，dropped3等的类），但不知何故，它似​​乎没有改变任何内容我无法弄清楚原因。

无论如何，这是代码：

$(function() {
  $('#allFacets').sortable({
    connectWith: 'ul',
    delay: 150,
    helper: "clone",
    placeholder: 'placeholder',
    start: function(e, ui) {
      ui.item.show(); // force jquery ui to display the original
    }
  });
  $('#userFacets').sortable({
    connectWith: 'ul',
    delay: 150,
    helper: "clone",
    placeholder: 'placeholder',
    receive: function(e, ui) {
      ui.item.clone().appendTo(this); // append a copy
      $("#userFacets.userFacets.ui-sortable").each(function(i){
          $(this).addClass("received"+ (i+1));
      });
      var step = prompt("Choose a name");
      $(this).html(step);
      ui.sender.sortable("cancel"); // return the original
    }
  }).on("dblclick", "li", function() {
    $(this).remove();
  });
});

.facet-container {
  width: 330px;
}
.right {
  float: right;
}
.left {
  float: left;
}
p {
  clear: both;
  padding-top: 1em;
}
.facet-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
  min-height: 1.5em;
  font-size: 0.85em;
}
.facet-list li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
.facet-list li.placeholder {
  height: 1.2em
}
.facet {
  border: 1px solid #bbb;
  background-color: #fafafa;
  cursor: move;
}
.facet.ui-sortable-helper {
  opacity: 0.5;
}
.placeholder {
  border: 1px solid orange;
  background-color: #fffffd;
}

<link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<div class="facet-container">
  <div class="left">
    <label>All Facets</label>
    <ul id="allFacets" class="facet-list">
      <li class="facet">Facet 2</li>
      <li class="facet">Facet 3</li>
      <li class="facet">Facet 5</li>
      <li class="facet">Facet 1</li>
      <li class="facet">Facet 4</li>
    </ul>
  </div>
  <div class="right">
    <label>User Facets</label>
    <ul id="userFacets" class="facet-list">

    </ul>
  </div>
</div>
<p>Drag & drop to rearrange items within a list or between lists.</br>Double-click to move item from one list to the bottom of the other.</p>

提前谢谢！

Answer 1

参见编辑过的JS

＆＃13;

＆＃13;

$(function() {
  $('#allFacets').sortable({
    connectWith: 'ul',
    delay: 150,
    helper: "clone",
    placeholder: 'placeholder',
    start: function(e, ui) {
      ui.item.show(); // force jquery ui to display the original
    }
  });
  $('#userFacets').sortable({
    connectWith: 'ul',
    delay: 150,
    helper: "clone",
    placeholder: 'placeholder',
    receive: function(e, ui) {
      var step = prompt("Choose a name");
      $(this).append("<li class='facet'>" + step + "</li>")
      ui.sender.sortable("cancel"); // return the original
    }
  }).on("dblclick", "li", function() {
    $(this).remove();
  });
});

＆＃13;

.facet-container {
  width: 330px;
}
.right {
  float: right;
}
.left {
  float: left;
}
p {
  clear: both;
  padding-top: 1em;
}
.facet-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
  min-height: 1.5em;
  font-size: 0.85em;
}
.facet-list li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
.facet-list li.placeholder {
  height: 1.2em
}
.facet {
  border: 1px solid #bbb;
  background-color: #fafafa;
  cursor: move;
}
.facet.ui-sortable-helper {
  opacity: 0.5;
}
.placeholder {
  border: 1px solid orange;
  background-color: #fffffd;
}

＆＃13;

<link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<div class="facet-container">
  <div class="left">
    <label>All Facets</label>
    <ul id="allFacets" class="facet-list">
      <li class="facet">Facet 2</li>
      <li class="facet">Facet 3</li>
      <li class="facet">Facet 5</li>
      <li class="facet">Facet 1</li>
      <li class="facet">Facet 4</li>
    </ul>
  </div>
  <div class="right">
    <label>User Facets</label>
    <ul id="userFacets" class="facet-list">

    </ul>
  </div>
</div>
<p>Drag & drop to rearrange items within a list or between lists.</br>Double-click to move item from one list to the bottom of the other.</p>

＆＃13;

＆＃13;

＆＃13;