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

Question

我正在尝试建立一个像这样工作的系统:您可以在列表的 5 个元素之间进行选择，并将其拖放到特殊位置。一旦您放下它，就会出现一个弹出窗口，询问您要更改该元素的内容。然后修改后的元素就会出现在特殊的地方。

它只能工作一次，但如果您想添加另一个元素，这个新元素会删除旧元素以取代它的位置。

每次有东西被丢弃时，我都会尝试添加一个类，这样就不会删除任何内容(这样你就会有名为 drop1、drop2、drop3 等的类)，但不知何故，它似​​乎没有改变任何东西，我不明白为什么。

无论如何，这是代码:

$(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

$(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();
  });
});

.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>