Drag and Drop mit fixed positions

[BDG]

Hey Freunde.
Ich will soetwas wie das machen: http://www.pureexample.com/ExampleTesterII-67.html
Also das man Objekte hin und herschieben kann,
aber die an festen Positionen stehenbleiben.
Das soll hierdrauf angewand werden: http://dashframe.net/beta/basti/bastiDesignTest/HTMLPage.html
Und die bestehenden Boxes da sollen auch wohin geschoben werden, wogerade keine sind!
Und wenn da eins ist, und man das darauf schieben will, sollen die getauscht werden...
Und es soll die später ja auchnoch in anderen größen geben, wie bei Windows 8!

Wie mache ich sowas? Ich hab es bisher nur hinbekommen aus einem 2D-Array diese Teile dahinzuzaubern.

 

[Tronjer]

jQuery UI sortable?

 

[BDG]

Ja aber wie? Ich hab das probiert, auch schon vorher, aber so wie ich das verstanden habe, in dem Beispiel geht das nur für <ul>... Hab das mit divs probiert, aber die haben sich nicht weggbewegt..

 

[Tronjer]

Sicher geht das auch mit Divs. Schau mal unter portlets.

 

[BDG]

Ich habs jetzt so gemacht:
$("#boxes").append("<div class='greenbox' id='" + x + y + "a'; style='top: " + ((x * 120) + 100) + "px; left: " + ((y * 240) + 40) + "px;'><p class='text1'>Peter"+x+y+"</p></div>");
$("#" + x + y + "a").draggable({ helper: "clone", connectToSortable: "#boxes" });

Also erste Zeile wird das Div hinzugefügt mit der jeweiligen Position, und einer individiuellen id.
Und in der zweiten wird dann das eben erstellte div draggable gemacht, so wie ich das verstanden habe...
Oder fehlt da noch was oder so?

 

[BDG]

Btw, kann das eigentlich daran liegen, dass die Position absolute ist? Das die sich nicht tauschen können?

 

[BDG]

Hey Freunde. Also ja, daran lags schonmal
Also ich hab aber ein anderes Problem:
Ich habe ein Div mit der ID "boxes". Dadrinne sind ganz viele Vierecke.
Aber das sind zwei verschiedene Arten von Vierecken, die einen haben die ID "noDrag" und die anderen "draggable".
Also die einen soll man verschieben können, die anderen nicht.

Jetzt muss man aber bei sortable ein Div angeben wo sich alle bewegbaren objekte drin befinden. Und man kann schreiben:
$("#boxes").sortable() - Dann sind ALLE Bewegbar. Oder:
$("#boxes").sortable({ group: 'no-drop', drag: false }) - Dann ist KEINS bewegbar.
Was soll ich also tun? Die sind ja alle im gleichen Div... Und anstatt #boxes kann man auch nicht die id von den Boxen angeben...

 

[Tronjer]

Falls die Divs sich bei einem position: absolute nicht draggen lassen, hast du doch bereits einen Ansatz. Lege auf die Klasse .not-draggable entsprechende Eventlistener, welche beim mouseover CSS-Attribute hinzufügen und bei mouseout diese wieder entfernt.

 

[BDG]

Nene, das Problem hab ich gelößt, das ist alles jetzt relative positioniert, und funktioniert mit dem verschieben.
Jetzt will ich aber im GLEICHEN Div noch andere objekte haben, die sich nicht verschieben lassen, aber trotzdem platz machen, wenn ein verschiebbares objekt dahingezogen wird. Und das geht auch mit drag:false, siehe mein Post davor.
Aber entweder sind immer alle nicht verschiebbar oder alle verschiebbar. Da is das Problem...

 

[Tronjer]

Dann belege mouseover und mouseout doch mit einem disable() und enable(). Das sollte gehen.

 

[BDG]

Disable und enable was? Hä, wie?

Ich dachte jetzt eigentlich eher daran, dass es eine Möglichkeit gibt, die Boxen die sich nicht bewegen sollen, trotzdem als unbewegbar zu taggen, auch wenn man da ja eigentlich nur ein div angeben soll, ka..

 

[Tronjer]

Disable und enable was? Hä, wie?

Uhm, hast du mal in die API-Doku geschaut?

Der Gedanke war aus meinem vorigen posting war eine Art bind/unbind des Events beim targeten von items mit der Klasse .not-dragable.

Pseudocode:

$('.not-dragable')
.mouseenter(function() {
  $( ".selector" ).sortable( "disable" );
})
.mouseleave(function() {
  $( ".selector" ).sortable( "enable" );
})

 

[BDG]

Ach so war das gemeint! Danke, das funktioniert echt super :)! Ja, da bin ich jetzt garnicht so drauf gekommen, ich dachte eher dass man das irgendwie in 2 Gruppen aufteilen muss, aber das is ja viel Schlauer Danke!!!