wake-up-neo.com

jQuery kann per Drag & Drop zwischen zwei Containern verschoben und sortiert werden

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

  1. Die Seite hat zwei Unterteilungen: eine ist "#Origin" und enthält viele Miniaturbilder, und die zweite ist "#drop", auf der die Bilder abgelegt werden können (nur bis zu 3).
  2. es muss möglich sein, die Bilder per Drag & Drop von #drop zurück nach Origin zu ziehen.
  3. #drop muss sortierbar sein, da die Reihenfolge der 3 ausgewählten Bilder von Bedeutung ist.
  4. Wenn Sie auf #drop ablegen, sollten die Bilder so ausgerichtet werden, 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 zurück nach #Origin gezogen 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 mir 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 aus ziehbaren Bildern, Bildern mit einer "ziehbaren" Klasse und #drop mit einem akzeptierten Wert von ".draggable" die grundlegendste Funktionalität ermöglichen, aber auch das scheint nicht zu sein nehmen. Ich habe auch gelesen, dass es auch funktionieren sollte, wenn Drag & Drop-fähig und Drop-fähig dieselbe "Bereich" -Einstellung haben, was aber nicht der Fall ist.

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.

27
GR7

Hier ist die Geige mit dem Endergebnis:

http://jsfiddle.net/39khs/82/

Der Schlüssel bestand darin, das "drop" -Ereignis zu behandeln und das abgelegte Bild manuell aus #Origin zu entfernen und es zu #drop hinzuzufügen. Das ist eigentlich das, was ich bei der ersten Implementierung gemacht habe, aber ich wusste nicht genau, wie ich es mit jQuery machen soll:

 $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

Ich bin mir nicht sicher, warum jQuery das gezogene Element nicht wirklich aus dem alten Container entfernt und zum neuen hinzufügt. Dies war jedoch erforderlich, damit das neu abgelegte Element korrekt angezeigt wird und nicht nur genau dort, wo es abgelegt wurde. Ignorieren von CSS-Platzierung/Styling.

Die Schlüsselzeile stammt von @Barry Pitman zu der folgenden SO Frage:

jQuery draggable + dropable: Wie man ein abgelegtes Element auf ein abgelegtes Element fängt

UPDATE: Ich hatte heute etwas Freizeit und wollte prüfen, ob es mit nur sortierbar möglich ist, und siehe da, es war.

http://jsfiddle.net/wj4ak/5/

nur zwei Codezeilen ermöglichen das Ziehen und Ablegen von einem Container in einen anderen und das Sortieren der Elemente. Sie müssen überhaupt nicht in ul/ol-Listen enthalten sein. Das ärgerliche ist, dass ich nicht vorhatte, die Elemente auf dem Origin div sortierbar zu machen, aber damit kann ich jetzt leben.

64
GR7

Wenn Sie .droppable(), .draggable(), .sortable() verwenden möchten, müssen Sie nur .sortable() verwenden.

Mit Ihrer jsfiddle habe ich folgende Änderungen vorgenommen:

HTML:

<div id="wrapper">
    <div id="Origin" class="fbox">
    <ul id="sort1" class="list">
      <li><img src="http://placehold.it/140x100" id="one" title="one" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="two" title="two" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="three" title="three" class="draggable" /></li>
    </ul>
    </div>
  <p>test</p>
    <div id="drop" class="fbox">
      <ul id="sort2" class="list"></ul>
    </div>
</div>

JAVASCRIPT:

$( "#sort1, #sort2" ).sortable({
      helper:"clone", 
      opacity:0.5,
      cursor:"crosshair",
      connectWith: ".list",
      receive: function( event, ui ){ //this will prevent move than 3 items in droppable list
         if($(ui.sender).attr('id')==='sort1' && $('#sort2').children('li').length>3){
           $(ui.sender).sortable('cancel');
         }
      }
});

$( "#sort1,#sort2" ).disableSelection();

CSS:

#Origin
{
  background-color: green;
}
#drop
{
  background-color: red;
  min-height: 120px;
}
.list
{ 
  min-height: 120px;
} 
.list li
{
 display: inline-block;
 list-style-type: none;
 padding-right: 20px;
}

DEMO: http://jsfiddle.net/39khs/80/

Hoffe das hilft und lass es mich wissen, wenn du irgendwelche Fragen hast!


21
Dom