单击时从 jquery 可排序列表中删除一个元素

Question

我在 jQuery 中有两个可排序的列表。它们被称为 sortable1 和 sortable2。它们是

中的
• 。当用户将一个元素从 sortable2 拖到 sortable1 中时，该元素将克隆到 sortable2 中。一旦放入 sortable1，用户就不能再将其移回 sortable2，因为已经有另一个替代了它。

  我的问题本质上是两个方面：

  1. 如何防止放在 sortable1 中的项目被拖回 sortable2，同时仍然能够重新排列。
  2. 如何实现点击功能，以便删除您点击的可排序元素。这种行为应该只发生在 sortable1 中。

  这是脚本：

  <script>
  $(function() {
      $( "#sortable1" ).sortable({
          connectWith: ".connectedSortable"
      }).disableSelection();
              $( "#sortable2" ).sortable({
          connectWith: ".connectedSortable",
                      helper: function(e,li) {
                                      copyHelper= li.clone().insertAfter(li);
                                      return li.clone();
                                  }
      }).disableSelection();
  });    
  </script>
  

  这是列表后面的 html 的 sn-p：

  <div id="symbolbay">
       <p>Drop symbols here</p>
       <ul id="sortable1" class="connectedSortable"></ul>
  </div>
  <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-highlight">Click me to delete only me</li>
      <li class="ui-state-highlight">Click me to delete only me</li>
  ...There are a whole bunch more, finally ending in...
  </ul>
  

  感谢您的帮助！我对这项惊人的技术很陌生，我一直对它的功能感到惊讶。

Answer 1

你应该把它分成两个问题。关于#2：

$('#sortable1 .ui-state-highlight').click(function(){
  $(this).remove();
});

Answer 2

我使用以下代码（@ChrisHerbert 代码在我的情况下不起作用）：

$("#sortable").on("click", "li", function () {
    $(this).remove();
});