[Drag & Drop] Div in anderes Div schieben und SQL-Befehl ausführen

BadKiss

BadKiss

Mitglied
Huhu :)

Da mir heute schon geholfen wurde bei einem PHP Problem (danke nochmal ^^), versuch ich nun hier mal mein Glück.

Gleich vorne weg: Ich bin in Sachen JS und Ajax noch ziemlicher Anfänger, daher bitte nicht zu sehr böse sein, wenn meine Fragen und mein Problem evtl von ganz einfacher Lösungsnatur sind.

Ich möchte auf meiner Seite das Einsortieren von "Karten" einfacher und benutzerfreundlicher gestalten.
Bisher musste man in einem Dropdown immer noch auswählen, wohin man diese Karte "verschieben" möchte.
Jetzt würde ich es gerne per Drag&Drop so machen, dass die Karte sich in einem Div befindet und die Kategorie (wo die Karte einsortiert werden kann) ebenfalls ein Div ist.

Ich möchte somit ein Div (mit der Karte) in das andere Div (die Kategorie) verschieben.

Hier mal mein bisheriges Ergebnis: Klick

Im Moment kann man die Karten zwar herumschieben, allerdings nicht in das Kategoriediv (Will Cards) schieben.

Hatte auch schon andere Möglichkeiten versucht (zb mit Listen), allerdings funktioniert das nicht über mehrere Ebenen bzw bei mehr als 100 Karten schleicht sich sicherlich da irgendwann ein Fehler ein.

Hab schon lange daran rumprobiert und komme leider nicht weiter :(

Hier noch der momenate Code:
HTML: 
<link rel="stylesheet" href="style_collapse.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/test/styles.css" />
<script type="text/javascript" src="collapse.js"></script>
<script type="text/javascript" src="jquery-1.3.2.js" ></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js" ></script>
<script type="text/javascript" >
$(function(){
	$('.dragbox')
	.each(function(){
		$(this).hover(function(){
			$(this).find('h2').addClass('collapse');
		}, function(){
			$(this).find('h2').removeClass('collapse');
		})
		.find('h2').hover(function(){
			$(this).find('.configure').css('visibility', 'visible');
		}, function(){
			$(this).find('.configure').css('visibility', 'hidden');
		})
		.click(function(){
			$(this).siblings('.dragbox-content').toggle();
		})
		.end()
		.find('.configure').css('visibility', 'hidden');
	});
	$('.column').sortable({
		connectWith: '.column',
		handle: 'h2',
		cursor: 'move',
		placeholder: 'placeholder',
		forcePlaceholderSize: true,
		opacity: 0.4,
		stop: function(event, ui){
			$(ui.item).find('h2').click();
			var sortorder='';
			$('.column').each(function(){
				var itemorder=$(this).sortable('toArray');
				var columnId=$(this).attr('id');
				sortorder+=columnId+'='+itemorder.toString()+'&';
			});
			//alert('SortOrder: '+sortorder);
			/*Pass sortorder variable to server using ajax to save state*/
		}
	})
	.disableSelection();
});
</script>

<div class="column" id="column2">
	<div class="dragbox">
		<h2>&nbsp;&nbsp;&nbsp;Will Cards&nbsp;&nbsp;&nbsp;</h2>
		<div class="dragbox-content-will">
		</div>
	</div>
</div>

<div class="column" id="column1">
	<div class="dragbox" id="item1" >
		<h2>Keksdose 01</h2>
		<div class="dragbox-content" >
			<img src="keksdose,1.gif" alt="" />
		</div>
	</div>
	<div class="dragbox" id="item2" >
		<h2>Keksdose 02</h2>
		<div class="dragbox-content" >
			<img src="keksdose,2.gif" alt="" />
		</div>
	</div>
	<div class="dragbox" id="item3" >
		<h2>Keksdose 03</h2>
		<div class="dragbox-content" >
			<img src="keksdose,3.gif" alt="" />
		</div>
	</div>
	<div class="dragbox" id="item4" >
		<h2>Keksdose 04</h2>
		<div class="dragbox-content" >
			<img src="keksdose,4.gif" alt="" />
		</div>
	</div>
	<div class="dragbox" id="item5" >
		<h2>Keksdose 05</h2>
		<div class="dragbox-content" >
			<img src="keksdose,5.gif" alt="" />
		</div>
	</div>
</div>

Und das Stylesheet:
HTML: 
.column{
	float:left;
	position:relative;
	margin-left:2px;
}
.column .dragbox{
	margin:2px 2px 2px;
	background:#3D3D3D;
	position:relative;
	float:left;
	border:1px solid #5C5B5B;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.column .dragbox h2{
	margin:0;
	font-size:11px;
	padding:2px;
	background:#3D3D3D;
	color:#a1a1a1;
	border-bottom:1px solid #5C5B5B;
	font-family:Tahoma;
	cursor:move;
	text-align:center;
}
.dragbox-content, .dragbox-content-will{
	background:#3D3D3D;
	min-height:66px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	margin:2px 2px 2px;
	background:#3D3D3D;
	position:relative;
	float:left;
	border:1px solid #5C5B5B;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.dragbox h2.collapse{
	/*background:#3D3D3D url('collapse.png') no-repeat top right;*/
	background:#3D3D3D;
}
.dragbox h2 .configure{
	font-weight:normal;
}

Wenn ihr noch etwas benötigt, zb die JS-Dateien, dann einfach bescheid sagen.

Ich hoffe, es kann mir jmd bei dem Problem helfen, ich bin schon am Verzweifeln langsam :(

Achja, es würde mir schon reichen, wenn ich es so hinkriege, dass ich das Div in das andere verschieben kann, der SQL-Befehl kann noch warten (also dass der dann ausgeführt wird).
 
Groß bei Deinen JQuery Framewok Drag Drop kann ich Dir leider nun nicht helfen aber mal im Anhang meine Drag Drop Klasse welche die Klasse Container noch benötigt.

Und ja noch meine Hilfsfunktions Sammlung Element.class (Asche auf mich ich war jung und unerfahren zumal Prototype Framework , muss ich irgendwann mal bei Gelegenheit umstellen)

Einbinden kannst das ganze dann so zum Beispiel

Code: 
// alle drag drop Container
// Kindelemente auf erste Ebene sind dann automatisch drag able 
var container = ["container1","container2","container3"];                

// neue Instanz erstellen und alle container überreichen
var dd = new DragDrop(container);

// Callback Methode wenn ein Element abgelegt wurde
dd.callOnDrop(function(){
   alert("do cool stuff");

// this.dropped_element   das was abgeworfen wurde
// this.drop_container        in welchen Container was abgeworfen wurde
// this.start_con                  was war der Startcontainer 
});

Gibt da noch mehr Funktionen in der Klasse aber war zu faul für ne Doku ;) Eventuell hilft es Dir ja was.
 

Anhänge

Zuletzt bearbeitet:
Hi :)

danke schonmal für deine Nachricht, hat mich schonmal meinem Ziel etwas näher gebracht.

Jetzt muss ich es nur noch schaffen, dass ich nen SQL ausführen lasse, aber ich versuchs anhand der Demo3 von dir mal, ob ichs hinkriege, wenn nicht, sag ich bescheid.

Danke nochmal =)
 
Naja du musst ja nur in der callback Methode dein Ajax Request dann senden.

Die Callback Methode wird mittels der call Funktion von JavaScript aufgerufen , das bedeutet ich biege den Zeiger this einfach auf ein anderes Objekt um da er sonst auf window oder eben das Objekt zeigen würde in dem die Funktion liegt.

In dem Falle kannst dann mit

this.droppedElement rausfinden welches HTML Element wurde gedroppt
this.drop_container in welchen Container wurde es abgelegt
this.start_con der Ursprungscontainer wo es mal lag zu 99% wohl unnütz das zu wissen aber nice to have ;)

Alles weitere sollte ja kein Problem mehr darstellen.

Alternativ kannst zu der annonymen Funktion auch eine feste Funktion angeben wie zum Beispiel

Code: 
function speicherKarte(){
    if(this.drop_container.id == 'will_cards') {
        var card = this.dropped_element;
             
        // dein Ajax Request
    }
}
 ... 
drag_drop.callOnDrop(speicherKarte);
 
Danke für den Tipp.
Allerdings bin ich wohl grad ein bisschen durcheinander, ich bekomm es zumindest gerade nicht hin, wie du es meinst.

Wo soll ich die Funktion jetzt genau einbauen und wie frage ich ab, welches Element in welchen Container gelegt wurde?

Tut mir leid, wenn die Frage etwas doof rüber kommt :(

Edit: Ok, das einzige was mir nun richtig ausgegeben wird, ist start_con --> container1.
Bei drop_container kommt lediglich [object HTMLDivElement].
Und bei droppedElement gibt er mir undefined zurück.
 
Zuletzt bearbeitet:
Ja er gibt dir nur die Referenz auf das HTML Node zurück

zum beispiel

alert(nodename this->drop_container); wird Dir dann zum beispiel sagen div , oder span oder weiß der Geier ;) this.drop_container.id gibt dir dann die ID vom HTML Element zurück oder this.drop_container.className dann den CSS Klassennamen vom HTML Objekt in dem Falle das Element wo was abgelegt wurde.

das 2. es heißt auch nicht this->droppedElement sondern this->dropped_element; wieder eine HTML Node genau wie der drop_container.

das 3. die Funktion kannst als annonyme Funktion übergeben direkt , das heißt sie hat einfach keinen Namen oder b) du legst irgendwo mal eine Funktion hin die hat den Namen save_card und übergibst dann den Funktionsnamen der Methode callOnDrop.
 
Zuletzt bearbeitet:
Jetzt hab ichs hinbekommen, dass er mir das aktuelle Element ausgibt, den aktuellen Container und den vorherigen :)

Nun fehlt mir nur noch die SQL-Anweisung ^^
 
Nur noch so zur Ergänzung falls du mal Einstellungen für die Container benötigst.

Code: 
    var container = ['container1','container2'];
    drag_drop = new DragDrop(container);
   
    var dd_conti = drag_drop.getContainer('container1');
    dd_conti.setParam({
        clone:true,
        drop:false,
        dragable:['div','p','img'] 
    });

Einstellung clone (true) alles was da nun per drag und drop verschoben wird wird geclont. Aber auch die ID also dürften dann diese Elemente die per drag und drop verschoben werden keine ID mehr haben.

drop = false || true ; bei false kann in den Container nix mehr abgelegt werden nun.

dragable : array(String) macht eigentlich genau das Gegenteil vom Namen habe ich geschlampt , diese Elemente können nun nicht mehr bewegt werden. Nicht zu vergessen dabei das immer nur die oberste Schicht im DOM Baum behandelt wird.

Und nun viel Erfolg bei deinen MySQL :)
 
Zuletzt bearbeitet:
Ah, dankeschön, werd ich mal demnächst versuchen :)
Und mal sehn, wie ich mit dem SQL voran komme ;)

Aber nochmal danke bisher für die Hilfe =)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück