Drag n Drop -> Div in Div droppen?

[Forumsgast]

Servus allerseits,

Folgendes Tutorial habe ich heute mal durchgearbeitet:
http://luke.breuer.com/tutorial/java...-tutorial.aspx

Funzt soweit auch wunderbar und ich denke ich habs auch komplett kapiert.

Das weitaus schwierigere Problem ist für mich nun die Umsetzung meines weitergehenden Vorhabens. Und zwar möchte ich das nun bewegliche Div-Element in ein anderes Div-Element droppen und dort fest verankern.

Gibt es hierfür einen recht kompakten Weg oder ein gutes Tutorial was euch einfällt? Ich beiße mir gerade die Zähne am Nachvollziehen des folgenden Codes aus:

http://www.brain4.de/programmierecke/js/dragNdrop.php

Hier wird ein span-Element schön verankert, allerdings ist der Quellcode leider noch ein paar Hausnummern zu hoch für mich =/.

Habt ihr ne gute Idee wie ich das erstgenannte Tutorial fortsetzen und zum Ziel kommen könnte?

Bin für jede Hilfe dankbar.

Gruß, Seb

[Forumsgast]

jqueryui draggables
jqueryui droppables

Bei den draggables die Helper-Function anschauen, damit bekommste "relativ" einfach die Funktionalität hin wie im 2. Tutorial beschrieben (ondrop zusätzlich dann den parent einfügen).

Bugfix gibts zusätzlich spendiert:

/**
 * jqueryui bugfix
 * http://bugs.jqueryui.com/ticket/4333
 */
$.extend($.ui.draggable.prototype, (function (orig) {
    return {
        _mouseCapture: function (event) {
            var result = orig.call(this, event);
            if ($.browser.msie) {
                event.stopPropagation();
            }
            return result;
        }
    };
})($.ui.draggable.prototype["_mouseCapture"])); 

Der hats bis zur 1.8er nicht in die Sourcen geschafft, warum auch immer.

Grüße


Basti

[Forumsgast]

@rudygotya

Vielen Dank schonmal für den Tipp!

Habe mit JQuery bisher noch nix gemacht.
Eigentlich muss ich doch nur folgendes im Header einbinden:

<link type="text/css" href="css/themename/jquery-ui-1.8.13.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>

Und dann in meinem Script folgendes ausführen:

<script>
	$(function() {
		$("div.draggable").draggable();
	});
</script>

Oder sehe ich das falsch? Ich will, dass alle divs der Klasse draggable bewegt werden können. Leider tut sich noch nix diesbezüglich.
Eine entsprechende CSS Formatierung ist natürlich auch vorhanden. Muss ich noch weitere Schritte unternehmen?

Gruß, Seb

[Forumsgast]

Problem gelöst .

Eine der beiden *.js Dateien ist mittlerweile auf Version 1.5.1 und deshalb hat das Einbinden nicht funktioniert. Könnte man auch mal updaten auf der Page, sodass die Leute nicht auf Fehlersuche gehen müssen .

[Forumsgast]

Mal ne blöde Frage:

Habe die .js Dateien von JQuery in Notepad++ geladen.
Nun zeigt er mir alle Funktionen als großen Block an (autom. Zeilenumbruch ist an).
Gibts ne schnelle Möglichkeit die Funktionen in eine für das Auge gut lesbare Form zu bekommen?
Also dass er quasi nach jedem Semikolon nen Zeilenumbruch macht?

Gruß, Seb

[Forumsgast]

Nun zeigt er mir alle Funktionen als großen Block an

Das sind die minified-Versionen, die Ladezeiten sparen sollen.
Es gibt aber auch „lesbare“ Versionen.

Also dass er quasi nach jedem Semikolon nen Zeilenumbruch macht?

npp kann Suchen-Ersetzen, falls das deine Frage sein sollte ...

Ist aber natürlich in der primitiven Form weniger empfehlenswert, denn mit einem Semikolon das irgendwo in einer anderen Bedeutung anstatt als Befehlstrenner verwendet wird, bekommst du damit schnell ein nicht mehr lauffähiges Script, wenn du es wieder abspeicherst.

[Forumsgast]

http://code.jquery.com/jquery-1.6.1.js <-- Letzte Version
http://code.jquery.com/jquery-1.5.1.js <-- 1.5.1

Ist anfangs allerdings ziemlich komplex zu verstehen

[Forumsgast]

Vielen Dank euch beiden!

Jetzt weiß ich auch wofür das "min" im Dateinamen steht .

[Forumsgast]

Hmm,

Blöderweise gibt es in der Version 1.6.1 die draggables und droppables noch nicht. Die würd ich mir gerne anschauen.

@rudygotya
Hast du die Helper Funktion zufällig gerade in "lesbarer" Form parat?

Weitere Frage an euch:

Mein Code für den Drag and Drop sieht nun folgendermaßen aus:

<script>
$(function() {
		$( "div.draggable" ).draggable();
		$( "div.droppable" ).droppable({
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" );
					.appendChild(???);
			}
		});
});

</script>

Nun meine Frage:
Wenn ich den Ziel-Container nicht nur highlighten will, sondern ihm auch ein Kind anhängen will benötige ich ja eine Referenz auf das gerade an der Maus hängende Objekt. Habt ihr ne Ahnung wie ich das Kind beim Namen nennen kann? =D

Gruß, Seb

[Forumsgast]

Blöderweise gibt es in der Version 1.6.1 die draggables und droppables noch nicht.

Die sind auch Teil von jQuery UI

<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>

(UI steht für User interface, also Benutzeroberfläche, damit Du das auch gleich weisst.)

[Forumsgast]

Danke Nikosch.

Gibts davon denn eine nicht-minified Version zum lesen?
Ich hab keine gefunden =(.

[Forumsgast]

http://code.google.com/p/jquery-ui/d...-ui-1.8.13.zip

[Forumsgast]

Besten Dank! =)

[Forumsgast]

Dann eben hier nochmal .

Die helper-Funktion erlaubt mir auf "clone" zu schalten.
Das funktioniert auch.
Ich habe meinen gedanklichen Ansatz aber mittlerweile geändert und möchte gar nicht mehr klonen, sondern lediglich den Inhalt übertragen und das draggable dann ausblenden.

[Forumsgast]

und dort fest verankern.

kannste nicht einfach die draggable Eigenschaft entfernen?