Drag and drop - Drop in different Boxes

[Moribundus]

Hey There,

I´m German and new, so sry for my english.

I used a jquery ui multi Drag and Drop Solution on my local website here is the code:

$(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);
		}
	};
	
	$('.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);
			
		})
	}
});

and html:

<table class="planningtable">
	<tr>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
	</tr>
	<tr>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<td class="planning"></td>
		<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>

This Solution can drag and drop more than one div´s but only the div that i touched dropped.
I try to find a solution that the div´s can´t only dropped together, i need a solution that the div´s can drop in different boxes together.

But i´m not a pro in JS and need help, pls.

i make a picture for what i want:



I hope anyone can Understand and help me.

Kind Regards

[Moribundus]

Why is my Post empty?

[VIPStephan]

Your post was in der moderation queue, probably because you modified it later on. The spam protection is a little nervous sometimes.

[Philip M]

Originally Posted by VIPStephan

Your post was in der moderation queue, probably because you modified it later on. The spam protection is a little nervous sometimes.

Donner und Blitzen! The German for "moderation queue" is feminine so die not der.

die Mäßigungswarteschlange

[VIPStephan]

Yes, you are right in that it is feminine but you failed to see that “moderation queue” here is in dative case. So, the plain noun is in fact “die Mäßigungswarteschlange” (although that isn’t actually a real word anyway; “Moderation” is used in German, too, and Germans would probably say “Moderationswarteschlange” (which is still feminine)) but here I indicate that something is in the “moderation queue” which in German becomes “in der Mäßigungswarteschlange”. If it was masculine you would say “in dem Mäßigungswarteschlange”, or actually short “im Mäßigungswarteschlange”), even though the plain noun would be “der …”.

But forgive my negligence, I will do my best to write proper English.