javascript - 单击时从 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 片段:

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