Ich möchte mehrere Klassen von Draggables haben, von denen jeder einer Klasse von Droppables entspricht. Zusätzlich möchte ich einen separaten "Mülleimer" haben, in dem alle Ziehhilfen abgelegt werden können, bis ein passendes Ablagefach für sie gefunden werden kann.
Nun kann dies leicht mit einer Accept-Funktion erreicht werden. Jedoch kann ich bis zu 20 Klassen haben, jede mit 30-40 ziehbaren / dropables. Wenn ich also eine "accept" -Funktion dafür verwende, friert mein Chrom in dem Moment, in dem ich ein ziehbares Objekt aufhebe, ein, während es Tests für jedes abwerfbare Objekt auf dem Bildschirm ausführt: (
Dies kann gelöst werden, wenn ich die Eigenschaft 'scope' verwende, da sie scheinbar anders funktioniert. Wenn ich jedoch ein Scope verwende, kann ich das Konzept des "Mülleimers" nicht umsetzen, da es nur einen Scope haben kann!
Gibt es eine Möglichkeit, dieses Problem zu umgehen? Geben Sie den Ziehpunkten mehr als einen Bereich, oder geben Sie dem Mülleimer viele Bereiche? Oder vielleicht eine andere Lösung, an die ich nicht denken kann?
Intern führt jQuery UI den folgenden Code aus, wenn Sie mit dem Ziehen von draggable beginnen, um zu ermitteln, welche droppable s berechtigt sind, das draggable zu erhalten.
Wie Sie sehen, ist der Code nicht trivial und würde erklären, warum Sie jedes Mal, wenn Sie mit dem Ziehen beginnen, eine langsame Leistung sehen.
Eine Sache, die Sie beachten sollten, ist, dass das erste, was in droppablesLoop eingecheckt wurde, ist, ob droppable deaktiviert ist.
Um die Leistung zu erhöhen, können Sie daher die entsprechenden droppable -Widgets immer manuell deaktivieren, wodurch Sie schnell aus dem obigen Codeblock springen können. Sie können dies tun, indem Sie das start -Ereignis für draggable verwenden, das zuerst ausgelöst wird.
Dies bedeutet im Wesentlichen, dass Sie die accept / scope Logik selbst implementieren, und die Auswirkungen auf die Leistung hängen von Ihrem Algorithmus ab. Es sollte jedoch nicht so schlimm sein, es zu implementieren. Der Grund, warum die Plugins so langsam sind wie sie sind, liegt darin, dass sie für eine Vielzahl verschiedener Situationen zu handhaben sind.
jQuery UI unterstützt nicht das Hinzufügen mehrerer Bereiche zu einzelnen draggable / droppable -Elementen, aber Sie können diese Funktionalität selbst übernehmen.
Ich lege ein Beispiel zusammen, um das hier zu zeigen - Ссылка .
Tags und Links javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable