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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2005
    Posts
    153
    Thanks
    26
    Thanked 0 Times in 0 Posts

    jQueryUI dragging multiple elements

    Hello All,

    jQuery UI is fantastic and the draggable function works well for one element, but is there a way to drag multiple elements with it simultaneously with it? For example if I were to drag one div then 3 others would move also.

    Thanks

  • #2
    Regular Coder
    Join Date
    Jun 2005
    Posts
    153
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Am I going to have to make my own javascript function?

  • #3
    Regular Coder
    Join Date
    Jun 2005
    Posts
    153
    Thanks
    26
    Thanked 0 Times in 0 Posts

    A function to do it

    Alright, looks like what I was looking for doesn't exist. So here is a bit of code I wrote up.

    Code:
    <script src="scripts/jquery.js"></script>
    <div id="test1" class="testingdivs" draggable="true" style="border: thin black solid; position: absolute; top: 100; left: 200; width: 100; height: 50;"></div>
    <div id="test2" class="testingdivs" draggable="true" style="border: thin black solid; position: absolute; top: 50; left: 0; width: 10; height: 10;"></div>
    <div id="test3" class="testingdivs" draggable="true" style="border: thin black solid; position: absolute; top: 0; left: 100; width: 10; height: 10;"></div>
    <script>
    	$(document).ready(function(){
    		dragbind = false;
    		$(document).mousedown(function(e){
    			divs = new Array();
    			startCssX = new Array();
    			startCssY = new Array();
    			startMouseX = e.pageX;
    			startMouseY = e.pageY;
    			dragbind = e.target.attributes.getNamedItem("class").value;
    			for(runloop = 0; runloop < $("."+dragbind).map(function(){return this.id;}).get().length; runloop++)
    			{
    				startCssX[runloop] = parseInt($("#"+$("."+dragbind).map(function(){return this.id;}).get(runloop)).css("left"));
    				startCssY[runloop] = parseInt($("#"+$("."+dragbind).map(function(){return this.id;}).get(runloop)).css("top"));
    			}
    		}); 
    		$(document).mousemove(function(e){
    			if(dragbind != false)
    			{
    				document.onmousemove = function() {return false};
    				for(runloop = 0; runloop < $("."+dragbind).map(function(){return this.id;}).get().length; runloop++)
    				{
    					if($("#"+$("."+dragbind).map(function(){return this.id;}).get(runloop)).attr("draggable") == "true")
    					{
    						$("#"+$("."+dragbind).map(function(){return this.id;}).get(runloop)).css("left",startCssX[runloop]+(e.pageX-startMouseX));
    						$("#"+$("."+dragbind).map(function(){return this.id;}).get(runloop)).css("top",startCssY[runloop]+(e.pageY-startMouseY));
    					}
    				}
    			}
    		});
    		$(document).mouseup(function(){
    			dragbind = false;
    		});
    	});
    </script>
    As you can see it breaks a bit of convention by introducing a "draggable" attribute, but it works.

    Have fun!

    -questionable

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The below works for jQuery 1.7 (current latest):

    https://github.com/someshwara/MultiDraggable

    Usage: $(".className").multiDraggable({ group: $(.className)});

    Drags the group of elements together. Group can also be an array specifying individual elements.

    Like: $("#drag1").multiDraggable({ group: [$("#drag1"),$("#drag2") ]});


  •  

    Posting Permissions

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