Entfernen eines Elements aus der jquery-sortierbaren Liste beim Klicken

Question

Ich habe zwei sortierbare Listen in jQuery. Sie heißen sortable1 und sortable2. Es handelt sich um

• s in s. Wenn der Benutzer ein Element von sortable2 in sortable1 zieht, wird das Element in sortable2 geklont. Sobald es in sortable1 abgelegt wurde, sollte der Benutzer es nicht zurück in sortable2 ziehen können, da bereits ein anderes Element seinen Platz eingenommen hat.

  Meine Frage ist im Wesentlichen zweigeteilt:

  1. Wie kann ich verhindern, dass ein in sortable1 abgelegtes Element zurück in sortable2 gezogen wird, gleichzeitig aber die Möglichkeit zur Neuordnung bleibt.
  2. Wie kann ich die Click-Funktion implementieren, so dass das klickbare Element in sortable1 gelöscht wird. Dieses Verhalten sollte nur in sortable1 auftreten.

  Hier ist das Skript:

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

  Und hier ist der Ausschnitt des HTML-Codes hinter den Listen:

       Symbole hier ablegen
  
      Klicke auf mich, um nur mich zu löschen
      Klicke auf mich, um nur mich zu löschen
  ...Es gibt noch viele mehr, schließlich endend in...

  Vielen Dank für jede Hilfe! Ich bin neu in dieser erstaunlichen Technologie und bin immer wieder fasziniert, was sie kann.

Answer 1

Sie sollten dies wahrscheinlich in zwei Fragen aufteilen. Bezüglich #2:

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

Answer 2

Ich benutze den folgenden Code (ChrisHerbert Code funktioniert in meinem Fall nicht):

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