Drag and Drop (DaD-)Multiselect

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

Moribundus

Hi there,

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

I use a DaD Multiselect Script for my lokal website:

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

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

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

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

I want to drag and drop more than one div at the same time in different target´s(tablecell´s)

I search for a example solution and try my own skill´s but i have no idea how make this possible and i´m not a pro in javascript.

I have made a picture what i want, better explain´s it:

I hope anyone can help me with that.

Kind Regards