Reset Dropable Jquery

Question

Ich habe ein einfaches Skript, das als Dateimanager fungiert. Die Idee ist, eine Gruppe von Dateien/Verzeichnissen auszuwählen und sie in ein anderes Verzeichnis zu verschieben. Wenn ein Verzeichnis jedoch .ui-ausgewählt ist, sollte es nicht abwerfbar sein. Das aktuelle Skript, das ich bisher verwendet habe, funktioniert wie erwartet, wenn ich nur einmal eine Gruppe von Dateien/Verzeichnissen auswähle, aber wenn ich eine andere Gruppe entmarke und neu auswähle, funktioniert sie nicht mehr.

Hier ist eine Geige, die das Problem veranschaulicht: https://jsfiddle.net/3gggh6bg/19/

Hier werden die js ist:

$(function() { 
    $("#filemanager").selectable({ 
    filter: 'tr', 
    start: function() { 
     $("tr.ui-selected").each(function() { 
     $(this).draggable('destroy'); 
     }); 
    }, 
    stop: function() { 
     $("tr.ui-selected").draggable({ 
     helper: function() { 
      var dom = []; 

      dom.push("<div style=\"border:2px solid black;width:50px;height:20px;line-height:25px;\">", 
      "<center>Files Selected: 1</center></div>"); 

      return $(dom.join('')); 
     }, 

     revert: 'invalid', 
     appendTo: 'parent', 
     containment: '#filemanager', 
     axis: 'y', 
     cursor: '-moz-grabbing' 
     }); 

     $(".droppable").not('.ui-selected').droppable({ 
     //accept: ".ui-selected", 
     //activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     }); 
    } 
    }); 
}); 

Jede Hilfe dankbar! Vielen Dank!

Answer 1

Es gab ein Ereignis, das wir übersehen hatten. Ich vermute, dass ich dies mit der gleichen Logik untersucht habe wie du. Wenn das Ereignis stop ausgelöst wurde, sollte ich in der Lage sein, die nicht ausgewählten Elemente oder die ausgewählten Elemente zu finden und einige abtrünnig zu machen, während andere unangetastet bleiben würden.

Dies ist zunächst der Fall, aber das Ereignis, das wir nicht sehen konnten, war das unselected Ereignis. Dies wird ausgelöst, wenn der Status eines Artikels von "Nicht ausgewählt" auf "Ausgewählt" zurückgesetzt wird. Hier ist, was ich am Ende mit:

https://jsfiddle.net/Twisty/3gggh6bg/21/

jQuery

$(function() { 
    $("#filemanager").selectable({ 
    filter: 'tr', 
    start: function() { 
     $("tr.ui-selected").each(function() { 
     $(this).draggable('destroy'); 
     }); 
    }, 
    selected: function(e, ui) { 
     console.log(e.target, " Selected triggered."); 
     $(ui.selected).removeClass("droppable"); 
    }, 
    stop: function() { 
     console.log("Stop triggered."); 
     $("tr.ui-droppable").droppable("destroy"); 
     $("tr.ui-selected").draggable({ 
     helper: function() { 
      var c = $("tr.ui-selected").length; 
      var $h = $("<div>", { 
      class: "ui-helper" 
      }).css({ 
      display: "block", 
      border: "2px solid black", 
      width: "50px", 
      height: "20px", 
      "line-height": "25px" 
      }).html("<center>Files Selected: " + c + "</center>"); 
      return $h; 
     }, 
     revert: 'invalid', 
     appendTo: 'parent', 
     containment: '#filemanager', 
     axis: 'y', 
     cursor: '-moz-grabbing' 
     }); 
     $("tr.droppable").droppable({ 
     hoverClass: "ui-state-active" 
     }); 
    }, 
    unselected: function(e, ui) { 
     console.log(e.target, "Unselect triggered."); 
     $(ui.unselected).addClass("droppable"); 
     $("tr.droppable").droppable({ 
     hoverClass: "ui-state-active" 
     }); 
    } 
    }); 
}); 

Dies setzt den droppable Status der ausgewählten Elemente jedes Mal Elemente ausgewählt sind. Wenn dies nicht so funktioniert, wie Sie es erwarten, geben Sie bitte weitere Informationen an.