Drag n Drop -> Div in Div droppen?

EG2011 · 23.05.2011, 19:47

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

rudygotya · 23.05.2011, 19:52

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:

PHP-Code:

  /**
 * 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

EG2011 · 23.05.2011, 23:05

@rudygotya

Vielen Dank schonmal für den Tipp!

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

Code:

<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:

Code:

<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

EG2011 · 23.05.2011, 23:10

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

.

EG2011 · 24.05.2011, 17:22

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

ChrisB · 24.05.2011, 17:25

Zitat:

Zitat von EG2011

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.

Zitat:

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.

Asterixus · 24.05.2011, 17:30

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

EG2011 · 24.05.2011, 17:40

Vielen Dank euch beiden!

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

.

EG2011 · 24.05.2011, 18:29

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:

Code:

<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

nikosch · 24.05.2011, 22:11

Zitat:

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

Die sind auch Teil von jQuery UI

Zitat:

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] JQuery Drag & Drop an Flashanimationen	Dopar	JavaScript, Ajax und mehr	7	26.03.2011 11:22
Drag and Drop - Frage	makaay04	JavaScript, Ajax und mehr	11	08.03.2011 18:50
Drag & Drop PHP und, oder HTML Editor gesucht	stemser	PHP Einsteiger	1	09.01.2011 16:22
[Erledigt] HTML5 Drag & Drop Upload	err0r	Gewerblich	0	10.12.2010 14:48
Scriptsuche Slide-Fade Toogle mit Drag and Drop + Cookie Script gesucht	GN	Scriptbörse	1	09.01.2010 00:05
Drag and Drop	Volex	JavaScript, Ajax und mehr	7	02.01.2010 20:37
[Erledigt] Drag & Drop Koordinaten übergeben	HaWa-Services	JavaScript, Ajax und mehr	4	13.11.2009 00:18
Drag and Drop	SteiniKeule	Scriptbörse	5	14.08.2009 14:51
Drag and Drop mit PHP und MySQL	Torsten.E	PHP Tipps 2009	16	08.07.2009 17:16
Drag and drop	asdasd	Scriptbörse	3	18.05.2009 18:52
Drag & Drop Begrenzung	Maaax	JavaScript, Ajax und mehr	8	10.05.2009 17:13
Drag & Drop via JQuery & Ajax --> Geht nicht :(	Plague	JavaScript, Ajax und mehr	2	23.10.2008 12:19
JavaScript Drag & Drop	lomtas	HTML, Usability und Barrierefreiheit	0	17.04.2006 22:15
drag &amp;amp;amp; drop Position speichern		HTML, Usability und Barrierefreiheit	7	03.11.2004 12:31

23.05.2011, 19:47
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	Drag n Drop -> Div in Div droppen? 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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

23.05.2011, 19:52
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	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: PHP-Code: /** * 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 __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

23.05.2011, 23:05
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	@rudygotya Vielen Dank schonmal für den Tipp! Habe mit JQuery bisher noch nix gemacht. Eigentlich muss ich doch nur folgendes im Header einbinden: Code: <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: Code: <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

23.05.2011, 23:10
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	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 .

24.05.2011, 17:22
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	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

24.05.2011, 17:30
Asterixus Erfahrener Benutzer Registriert seit: 03.08.2010 Beiträge: 300 PHP-Kenntnisse: Fortgeschritten	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

24.05.2011, 17:40
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	Vielen Dank euch beiden! Jetzt weiß ich auch wofür das "min" im Dateinamen steht .

24.05.2011, 18:29
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	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: Code: <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