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