Ich versuche, eine kleine Seite zu entwickeln, die die folgenden Funktionen hat:

Die Seite wird zwei Divs haben: Eine ist #ursprünglich und enthält viele Miniaturbilder, und die zweite ist #drop, auf der die Bilder abgelegt werden können (nur bis zu 3).Es muss möglich sein, die Bilder von #drop zurück zum Ursprung zu ziehen.#drop muss sortierbar sein, da die Reihenfolge der 3 ausgewählten Bilder von Bedeutung ist.Wenn Sie auf #drop ablegen, sollten die Bilder so ausgerichtet sein, als ob sie von Anfang an so angezeigt worden wären.

Ich hatte jQuery noch nie zuvor verwendet und hatte sogar einen funktionierenden Seitenprototyp, bei dem ich bereits Drag & Drop zwischen zwei Containern über native HTML5-Drag & Drop-Ereignisse ausgeführt habe. Als ich jedoch #drop die sortable () -Jquery-Funktionalität hinzufügte, Die Bilder konnten nicht mehr auf "#origin" zurückgezogen werden, was meine Funktionalität beeinträchtigt.

Also habe ich von vorne begonnen und wollte sowohl die Drag & Drop-Funktionalität als auch die Sortierbarkeit mit jQuery implementieren. Ich habe so ziemlich die gesamte API für alle Funktionen zum Ziehen, Ablegen und Sortieren gelesen, aber ich habe Probleme, dies zum Laufen zu bringen. Ich bin nicht sicher, ob es die Einstellungen sind, die ich für die einzelnen Funktionen verwende.

Auf der Geige können Sie sehen, dass die Bilder ziehbar werden, und ich kann die von mir festgelegten Einstellungen (Deckkraft, Cursor) sehen, aber die Bilder können nicht auf #drop abgelegt werden.

Soweit ich weiß, sollte die Kombination, Bilder ziehbar zu machen, Bilder mit einer "ziehbaren" Klasse und #drop mit einem akzeptierten Wert von ".draggable" ablegbar zu machen, die grundlegendste Funktionalität ermöglichen, aber selbst das scheint nicht zu sein nehmen. Ich habe auch gelesen, dass es auch funktionieren sollte, wenn Drag-and-Drop-fähig und Drop-fähig die gleiche Einstellung für den Gültigkeitsbereich haben, dies ist jedoch nicht der Fall.

Hier ist eine einfache Version des Seitencodes sowie eine jsFiddle:http://jsfiddle.net/39khs/

Code:

CSS:

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

js:

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

html:

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

Jede Hilfe wird sehr geschätzt.