Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drag and drop - Drop in different Boxes

    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:

    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:
    Code:
    <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
    Last edited by Moribundus; 02-25-2013 at 02:53 PM.

  • #2
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drag and drop - Drop in different Boxes

    Why is my Post empty?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Your post was in der moderation queue, probably because you modified it later on. The spam protection is a little nervous sometimes.

  • Users who have thanked VIPStephan for this post:

    Moribundus (02-26-2013)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by VIPStephan View Post
    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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •