MultiDrag and Drop, verschiebbare Elemente verschieden einhängen

[Moribundus]

Hallo Zusammen,

ich habe benutze Multi-Drag Funktion von Jquery UI, die verschiebbare Elemente anhand der Position im Dokument verschiebt und eine Drop Funktion selbs hinzugefügt.

siehe hier:

  
$(window).load(function(){  
	var selectedObjs;  
	var draggableOptions = {  
		start: function(event, ui) {  
			//get all selected...  
			if (ui.helper.hasClass('selected')) selectedObjs = $('div.selected');  
			else {  
				selectedObjs = $(ui.helper);  
				$('div.selected').removeClass('selected')  
			}  
			  
		},  
		drag: function(event, ui) {  
			var currentLoc = $(this).position();  
			var prevLoc = $(this).data('prevLoc');  
			if (!prevLoc) {  
				prevLoc = ui.originalPosition;  
			}  
  
			var offsetLeft = currentLoc.left-prevLoc.left;  
			var offsetTop = currentLoc.top-prevLoc.top;  
			  
			moveSelected(offsetLeft, offsetTop);  
			$(this).data('prevLoc', currentLoc);  
			globalElement = $(this);  
		}  
	};  
	  
	// Klasse welcher die Dragfunktion zugewiesen wird  
	$('.activity').draggable(draggableOptions).click(function(){$(this).toggleClass('selected')});  
  
$('.planning').droppable({  
  drop: function(event, ui) {  
    selectedObjs.appendTo(this);  
  }  
});  
  
	function moveSelected(ol, ot){  
		console.log("moving to: " + ol + ":" + ot);  
		selectedObjs.each(function(){  
			$this =$(this);  
			var p = $this.position();  
			var l = p.left;  
			var t = p.top;  
			console.log({id: $this.attr('id'), l: l, t: t});  
  
  
			$this.css('left', l+ol);  
			$this.css('top', t+ot);  
			  
		})  
	}  
});

und hier das html:

  
<table class="planningtable">  
	<tr>  
		<td class="planning"></td>  
		<td class="planning"></td>  
	</tr>  
	<tr>  
		<td class="planning"></td>  
		<td class="planning"></td>  
	</tr>  
</table>  
  
<table class="legend">  
	<tr>  
		<td>  
			<div id="drag1" onkeydown="deldiv()" class="activity" >FO</div><br>  
			<div id="drag2" onkeydown="deldiv()" class="activity" >FO</div><br>  
			<div id="drag3" onkeydown="deldiv()" class="activity" >FO</div><br>  
		</td>  
	</tr>  
</table> 

ich möchte nun erreichen das wenn ich mehrer Elemente verschiebe die sich in die Zelle(TD) einhängen in der sich in der Position des Dokumentes befinden, bisher hängen sich alle nur in die Zelle ein, wo ich das element hin verschiebe welches ich anfasse, obwohl sie sich an einer anderen Position befinden...

Kann mir jemand dabei helfen?

Vielen Dank im Vorraus...

[Siri]

Hallo,

schau dir mal diesen Thread an. Darin könnte eine Antwort verborgen sein.

Viele Grüße
Siri

[Siri]

Hallo,

ich nehms zurück, hab eben erst gesehen, dass du ja den Thread gestartet hast... Naja, vielleicht bringt dich auch die Auffrischung weiter ;-)

Viele Grüße
Siri

[Moribundus]

ich nehms zurück, hab eben erst gesehen, dass du ja den Thread gestartet hast... Naja, vielleicht bringt dich auch die Auffrischung weiter ;-)

Eine Auffrischung?
Also der Inhalt des Thread´s ist mir durchaus bekannt, richtet sich aber nach dem nativen Drag und Drop von HTML5, meine Funktion arbeitet aber nach dem Prinzip der Positionsbestimmung der verschiebbaren Elemente innerhalb des Dokumentes, bei einer Mehrfachauswahl und verschiebung müsste ich zuerst die Position der verschobenen Elemente bestimmen und dann an der Endposition diese in ein "Dropable" Element einhängen/aufnehmen sofern vorhanden, in meinem Bespiel schaffe ich es zwar mehrer zu verschieben, eingehangen wird aber nur das was ich angefasst habe, ich weiß nicht wie mir dieser Thread da weiterhelfen soll, aber du kannst es mir auch sagen wenn ich mich irren sollte...