EasyDrag jQuery Plugin
16/07/08 UPDATE: A new beta version is now available with some bug corrections. Thanks to Randy for the useful feedback!
29/06/08 UPDATE: Handler feature added! Finally I decided to add a little piece of extra functionality to the EasyDrag plugin. It has been constantly requested, so now you can download and test it. I will be releasing it as a final version after some feedback, so please let me know if it works for you.
How does it work?
It’s very simple, first you call the easydrag() method as in the old version and then you call the setHandler() method passing to it the id of the element that will act as the handle. The handle MUST be a child element of the content that will be dragged.
$("#box2").easydrag(); $("#box2").setHandler('handler3');Files
It has been a while since my last post, mainly because I’m currently a little busy with some projects. In one of these projects I had to add a drag-and-drop behavior to some DOM elements, and for that I have created the EasyDrag jQuery plug-in that I’ll share with you now.
Its main purpose is to add the ability to drag and drop almost any DOM element without much effort. So it’s simple to use and you can also attach handlers both to the drag and to the drop events, which permits you to extend the basic functionality to whatever you need.
How to use
To be able to use this plugin you should set the element you want to drag as absolute positioned and set an unique id for it (although it’s not strictly necessary because the script will try to set both for use otherwise). You are also advised to set the size of the element. Finally you need to add a code similar to the following example into your page.
<script src="jquery.easydrag.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// add drag and drop functionality to #box1
$("#box1").easydrag();
// set a function to be called on a drop event
$("#box1").ondrop(function(e, element){ alert(element + " Dropped"); });
});
</script>
Events
You can attach a function to be called when an element is being dragged and also another function to be called when the element is dropped passing them as a parameter to.ondrag and to.ondrop functions of the plugin. The plugin will pass an event object and the current element as the parameter to the attached functions.
Event Bubbling
By default EasyDrag is set to stop event bubbling so you can drag a div around without any problem but if you have elements inside a div, like a form for instance, you need to enable event bubbling to be able to interact with them.
To enable event bubbling simply pass “true” to the easydrag function as in the following example:
$("#box1").easydrag(true);Control
You can use the methods .dragOff() and.dragOn() to disable and enable the dragging behavior respectively.
388
到【灌水乐园】发言
July 14th, 2007 at 6:16 pm
If you have any doubt, any suggestion or if you have found a bug and want to suggest a correction please feel free to leave a comment!
July 14th, 2007 at 10:33 pm
Very slick! now I’m off to think up some fun uses for this. Thanks for the cool plugin.
Also, you ought to post it on jquery.com/plugins/. I’m sure others will appreciate it as well.
July 16th, 2007 at 5:41 am
Bug in Firefox 2.0 under XP. When I start dragging, the text outside of the box is selected. Not sure what’s the jQuery way of stopping the default event, if there’s no specific thing, there’s always:
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
July 16th, 2007 at 12:18 pm
It looks like you should set the z-index of the object. It’s sitting under text if I move it over text and then I can no longer grab it. Also on firefox 2.0 on xp
July 16th, 2007 at 2:07 pm
Hello Datrio, thank you for the information! The fixed version is already available for download. It turns out that jQuery already have this implemented, the event handler just need to return false to stop event bubbling.
July 16th, 2007 at 2:17 pm
Hello Jeff, good point. I have set the code to set the z-index property to 10000. It may help for quickly deployment but you should set the z-index by yourself if you need precise control over the elements layering.
July 30th, 2007 at 12:24 pm
Nice plugin. i would highly recommend getting rid of that SpiderMan logo at the top of the page, though. If someone from Marvel sees it you’re gonna get a letter from their lawyers.
July 30th, 2007 at 1:13 pm
And what about Chucky? hehe
July 31st, 2007 at 7:46 am
Chucky is OK..
Thnx.. was searching for this.
July 31st, 2007 at 10:43 am
-
great, lost my post because of a but in this shit comment window.
again in short: could you please provide an example of draggables and accepting droppables?
djot
-
July 31st, 2007 at 1:40 pm
I’m sorry djot, I was testing an anti-spam plugin. It indeed stops spams but I disabled it since other people may encounter problems like you did (maybe your web development toolbar had javascript disabled?).
So, now answering your question: you can achieve the “droppables” behavior using the .ondrop function with a sort of collision detection code. I did not include “droppables” in the source code because I wanted a clean and short plugin. But I may include it on demand.
To give you an idea of what I’m talking about I have coded a simple example that you can find at:
http://fromvega.com/code/easydrag/drop.html
Bye!
August 4th, 2007 at 7:52 pm
Hi there,
Just found this and I’m trying to use it. Unfortunately, using the copy of the plugin above and jQuery 1.1.1, I get an error:
$(”#admineditmenu”).easydrag is not a function
Obviously, I’m trying to add draggin to a div called admineditmenu, and I am doing so with this command:
$(’#admineditmenu’).easydrag();
Am I missing something?
August 5th, 2007 at 12:18 am
Hello Colin,
I’m sorry but I have not tested it with jQuery 1.1.1. But it seems not to be a jQuery problem (maybe I’m wrong) but are you sure that you are including all the .js files correctly? Could you try using the most recent version of jQuery just to be sure if the error persists?
By the way, the correct form to call is “.easydrag()”
See you!
August 5th, 2007 at 8:01 am
Hello ,
When setting the width/height of the box to auto or to a percentage (60% for example), the shape pf the dragged div changes while dragging !! any resolution/work around for this ??
Thanks
August 5th, 2007 at 12:55 pm
Hello semelak1,
The problem seems to be that you are not setting your div as absolute positioned and haven’t set the parent position to “relative”. When you call easydrag(), the plugin will set the element positioning to absolute so you can drag it around. Therefore, some previous relations that the element had with others will be invalidated and others will change to reflect the new relations.
So let’s say that you want to drag the element #freebox and that it is inside another box called #staticbox. #staticbox have no position property defined and have width set to 500px, #freebox have no position property defined as well and have width set to 50%. So #freebox will be 250px wide.
Then when you apply the plugin, #freebox will no longer use the #staticbox to calculate the 50% width but the next relative positioned element (at least it’s what we expect). If there is no relative positioned element as its ancestor the #freebox width will be calculated based on the document width. So that’s probably why the size of your div is changing.
You can solve this by setting absolute values for the width and height or setting the “position” property of its parent to “relative”. This means adding “position: relative” to #staticbox in the example given.
I hope it helps!
August 7th, 2007 at 3:43 am
Hi there, I’m using your plugin with a div which is contained into another div. The thing is that sometimes I get to drag the container div instead of the inner div although I haven’t assigned the drag’n'drop functionallity to the container div.
Can you tell me why this happens?
Good job though.
August 7th, 2007 at 12:08 pm
Hello Miguel,
I tried to reproduce the behavior you described here without success.
Everything worked as expected. Are you sure you are not assigning the drag’n'drop functionality to the wrong element? Maybe the ID of the element is being duplicated or something like that?
It will be easier to help if you make your code available somewhere.
Thank you!
August 20th, 2007 at 4:50 am
I downloaded the script and gave it a try. However, the first drag position was not good with IE … so, here’s a quick fix to use offsetTop instead of css(”top”) and offsetHeight.
line 125-126
- lastElemTop = parseInt($(this).css(”top”));
- lastElemLeft = parseInt($(this).css(”left”));
line 130
- if(isNaN(lastElemTop )) lastElemTop = lastMouseY - this.offsetHeight/2;
- if(isNaN(lastElemLeft)) lastElemLeft = lastMouseX - this.offsetWidth/2;
+ lastElemTop = this.offsetTop;
+ lastElemLeft = this.offsetLeft;
August 24th, 2007 at 5:28 am
Hi there, I’m using your plugin with a div which is contained into another div. I would like to limit the div drag inside a certain range (div id=”150″).
how can I do?
thanks
August 25th, 2007 at 5:46 pm
Thank you Stanoo Chang, it works much better now!
August 25th, 2007 at 6:22 pm
Hello Erica,
Since the main objective of this plug-in is to provide the core functionality of a drag-and-drop element it doesn’t have such a feature but you can achieve that using the .ondrag function.
Put inside it a code to get the coordinates of the boundaries of the element and check if it’s inside the limits you want it to be. If it is outside set the respective coordinate to equal as the limit.
I have coded a simple example for you. It works fine in Firefox but maybe it needs some fix to work properly in IE. I hope it gives you a direction to go:
http://fromvega.com/code/easydrag/prison.html
Bye!
August 27th, 2007 at 5:23 am
thank you very much
August 28th, 2007 at 5:36 am
thx for the plugin! it works fine, with a small exception.
when you click the div you want to drag (ie the yellow box on the first line of text) it attaches to the mouse on the second line of text. (it jumps a little downwards) how do u solve this?
have a nice day!
August 28th, 2007 at 12:33 pm
Hi fromvega,
I switched over from wzdragdrop to jquery and easydrag, because easydrag is giving me a much higher performance on dragables containing videos :))
But as a matter of fact forms in dragables are not really working anymore. Could you please give me a hint how I can make my input fields work in jquery.
Thank you and best regards!
Squitta
August 28th, 2007 at 12:58 pm
Yeah, I figured out a work around. On Click I am just given the element the input field the focus. If you find out something better, let me hear.
Thank you very much for your wonderfull script. I guess you heared it pretty much.
Best Regards,
Squitta
August 28th, 2007 at 1:01 pm
Mh, as I can see, now the cursor is not placed where I click. Instead its placed at the end of the tunnel hehehehe
So still a workaround is needed :))
August 28th, 2007 at 1:03 pm
Hey for your spiderman problem, try to find a spiderman, which is older than 30 years. I had a superman comic from 1969 as I can remember.
Just check out, you will find an pretty old one :))
August 28th, 2007 at 5:46 pm
Hello squitta, I’m a little busy these days but I’ll take a look at it later and try to find a way to make it work!
Thank you for the audience!
August 28th, 2007 at 11:42 pm
Hi squitta,
try downloading the script again (I have uploaded a new version) and now use $(”#yourdiv”).easydrag(true); and then check you form. It should work!
By passing “true” you tell EasyDrag to enable event bubbling and then you can get focus on the form elements.
Bye!
September 8th, 2007 at 9:39 am
Hi,
Here is a patch to avoid the element movement glitch when dragging a non-absolute positionned element.
it comes in replacement of the $(this).css(”position”, “absolute”) line in the mousedown handler.
// dynamically obtain element position on the page
var mytop=0, myleft=0;
var obj= this;
while( obj) {
mytop+= obj.offsetTop;
myleft+= obj.offsetLeft;
obj= obj.offsetParent;
}
// set it as absolute positioned
$(this).css( { position: “absolute”, top: mytop+”px”, left: myleft+”px” });
Possible improvement: calculate only when top and left attributes of the element are not available.
October 7th, 2007 at 12:04 am
Thanks a bunch… Was looking for this plugin. jQuery rocks
October 11th, 2007 at 6:53 am
Works ok - only did a small modification so the callbacks transmit the dragged element:
// mousemove
dragCallbacks[currentElement.id](e, currentElement);
// mouseup:
dropCallbacks[currentElement.id](e, currentElement);
October 18th, 2007 at 9:54 pm
For those who wish to title=”/packer/”>pack easydrag.js, semicolons are required at the end of the function definitions (lines 44,55,87,94 & 133).
Thanks for the plugin, fromvega!
October 20th, 2007 at 12:18 am
how to make like this “http://blog.xilinus.com/prototype-portal/test/index.html”
October 22nd, 2007 at 10:57 am
Looks like there is a bug about the easydrag ID:
// if no id is defined assign a unique one
if(undefined == this.id) this.id = ‘easydrag’+time();
I fixed it this way:
// if no id is defined assign a unique one
if(undefined == this.id || !this.id.length) this.id = ‘easydrag’+(new Date().getTime());
October 22nd, 2007 at 12:37 pm
Hello guys! Thank you for the efforts in making this plug-in better. I was voyaging but now I think I’ll be able to update it more often. I will make a new version of the plug-in with all the improvements soon! Thank you!
October 23rd, 2007 at 7:42 pm
Interesting script. How difficult would it be to go one step further and onDrop check to see if it is inside of a specified area or div? kind of like moving a file to a recycle bin. I can see some interesting applications for this.
October 27th, 2007 at 4:45 pm
Well i did everything you said with it and it still doesen’t work … It retrurns a script error like this\
$(”#box1″).easydrag is not a function
(no name)()index.html (line 21)
ready(function())jquery-1.2.1.js (line 1932)
init(function(), undefined)jquery-1.2.1.js (line 70)
jQuery(function(), undefined)jquery-1.2.1.js (line 20)
jQuery(function(), undefined)jquery-1.2.1.js (line 21)
(no name)()index.html (line 19)
to the wait list jQuery.readyList.push()jquery-1.2.1.js (line 1937)
(no name)()jquery-1.2.1.js (line 1961)
each([function()], function(), undefined)jquery-1.2.1.js (line 585)
ready()
I’m new in using jquerry andeven newer in programing:). So if you could help … i will be very very glad
Gracias
October 31st, 2007 at 6:15 am
Looks like a great script.
Im hoping to use it to allow a drag and drop ‘connection’ maker. I will have a series of options, and dropping one to another will create a connection.
I guess all i need to know is is it possible to know from
ondrop()… where its been dropped to… so i could say programatically, id ‘thing1′ has been dropped on id ‘thang2′… ultimately, they would all be draggable objects, in a way.
perhaps im being too vague
October 31st, 2007 at 10:59 am
There is no such functionality yet. Next release will incorporate all user contributions. You will be able to detect which element was dropped but for now you will need to implement your “target” code. There is an example linked in the comments, give it a look. Thanks!
October 31st, 2007 at 1:39 pm
Hey! Thanks for a killer plugin!
I’m trying to stick a form in a div, and then make that div draggable, but when I do so, the form becomes not usable. Specifically, I am unable to enter content into a text field in FF, although (strangely) the submit button works. I thought this was a z-index thing, but I’ve been playing with it for a while now and no luck.
Any hints?
October 31st, 2007 at 2:46 pm
Sorry - just some more clarification - I’m using $(”#content”).easydrag(true); to enable event bubbling, but when I try to select text in the box, the whole div moves, rather then selecting the text. Can I use ‘bind’/'unbind’ to temporarily disable/enable the drag behavior when a form field is selected? Not sure how to do this though…
November 4th, 2007 at 12:12 pm
hi,
thanks for the plugin, makes life easier…
when i drop a div, that has an click event, the event is triggered. how can i prevent this?
i tried to unbind the click event when i start dragging, and bind it again on mouseout, but then the event is triggered always one time more then before…
thanks!
November 5th, 2007 at 5:39 pm
Hi Colin Brumelle,
I have added two methods to the plugin: .dragOn() and .dragOff() that you can use to pause and restart dragging. I have made a test with forms with the following code. It works but not perfectly. Give it a try and return to us if you find a better solution.
$(”#form_div input”).click(function(){
$(”#form_div”).dragOff();
});
$(”#form_div input”).blur(function(){
$(”#form_div”).dragOn();
});
November 5th, 2007 at 5:41 pm
Hello marcin,
I have checked your site but I couldn’t see the click event after dropping!
November 6th, 2007 at 7:21 pm
What I would really like to see is a way you can specifify an Inner Div as the drag state…. this way you can move the whole object, but you can only drag the title. (I am using this as a way to create virtual windows on an application… It works great until I have a user try to use a combobox… it then still drags when I look at an elongated select box
November 6th, 2007 at 7:40 pm
Yeah… I’m planning to add a few more functionalities to the plugin as soon as I have more free time. But the original objective of this plugin was to provide a simple drag-and-drop functionality so others could use it as a base. But since pretty much everyone is seeking for drop targets, drag handlers and so on I may code them…
November 25th, 2007 at 3:20 am
Be nice to add a resize functionality too.
November 26th, 2007 at 11:14 am
is there a way to do a form submit when doing the .ondrop?
I’d like to use this to submit hidden fields to a form on another page on my site and then update a div on the current page showing success depending on server response. I don;t want the user to leave the current page but do the form submit in the background.
Regards,
Patrick
November 27th, 2007 at 3:10 pm
Hey Patrick, you can do it with AJAX. Just call the proper function that will make a remote post from inside .ondrop
December 3rd, 2007 at 5:04 pm
How to make a title div dragging the box only when the mouse is over the title?
December 6th, 2007 at 4:31 pm
Carlos, you will need to implement this… This script just provides the basic functionality of drag and drop.
December 7th, 2007 at 4:52 pm
Hi fromvega,
I am using lots of dragable layers in my applications, all are based on easydrag, I dropped out, wzdragdrop, because of performance issues. Most of the time easydrag and the wanted functionality is working fine in mozilla.
I am using easydrag layers as fixed objects on the screen, and store the position of the layer thru ajax on the webserver, so if a user clicks on another page the layer reapears at exactly the same spot, where the user left it.
But in internet explorer the dragable layer always is just thrown below the content, but as soon as the user clicks on the layer, the layer is moved to the spot, where it normaly is expected.
Please take a look at the website I posted here (http://www.ajdila.com/de/), sorry that the english translation is not finished yet. If you click on one of the products and put the product into the shopping cart, the dragable layer appears. Please play with it, maybe you are better able to find out why its not working as expected.
Thank you very much.
Sascha
December 7th, 2007 at 5:59 pm
Hello Sascha,
I’m a little busy right now to take a more concise look at your source code. But I have tested here with IE7 and the layer didn’t move at all :S
I think it’s something related to CSS. Did you set the “position” property of the layer to “absolute”?
Since it should be absolute positioned, try putting your layer outside any other tag, this may prevent future problems.
Try to validate your code withe the W3C validation tool, maybe something isn’t right.
Thank you,
fromvega
December 21st, 2007 at 12:30 pm
Hi Engine80
To your problem you can use the below solution
drop: function(ev, ui) {
var dropguy = $(ui.draggable.element).clone();
var id = dropguy.attr(”id”);
var divdata = document.getElementById(id);
var hdSave = document.getElementById(’hdSave’);
var hdType = document.getElementById(’hdType’);
hdSave.value = dropguy.attr(”id”);
hdType.value = this.id; // this is nothing but your droppable control.
$(”.drop”).each(function(i, node){$
(node).droppableDestroy();});//Fix IE bug
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._doPostBack(’UpdatePanel1′, ”);
//document.form1.submit();
//$(this).append(divdata.outerHTML);
}
December 27th, 2007 at 2:56 pm
Please check out this url:
http://ajdila/de/galleries/sascha/product-commercials/
It is now working with the moving layers and the storage in the servers or theire position. But the layers cant get shown as they should appear above a flash movie.
Maybe somebody has an Idea?
Thank you.
December 27th, 2007 at 8:55 pm
Hey Sascha, I can’t really say for sure what’s happening since I never messed up with floating divs and flash. But try setting the z-index property of the flash movie to a smaller value (or vice versa) and see what happens!
December 29th, 2007 at 5:32 am
I solved the problem, i still dont know how it works in internet explorer, because I dont have one.
You just have to use your plugin to create dragable layer, with lets say posiiton absolute, which supports the internet explorer then. Within the dragable layer you have to create another layer at a fixed size. The nested layer has to have a position:fixed attribute, which says that within the dragable the nested layer is fixed. From that moment the nested layer comes along with a z-index set to infinite. Flash behind a dragable is no problem anymore.
:))
January 13th, 2008 at 8:17 am
Hey,
Im trying to use your code to be able to drag a photo around inside a div and keep the overflow:hidden property so only certain parts of the photo are shown..
It seems that the photo is removed from the div is resides in even tho i have set the z-index of the photo to -99999 (as well as in your drag.js code)
any iedas?
January 13th, 2008 at 7:09 pm
Hello Lawrence,
I think the z-index property has nothing to do with what you want. Your problem is probably due to the the div positioning, it’s position property is set to absolute. You may try changing it to position: relative.
Let me know if it works!
Bye.
January 21st, 2008 at 1:06 am
Hi Fromvega,
Thanks a lot for this contribution, I just use easydrag to make the user able to drag a small google map div like a window. Works very well. Didn’t have a need to drag/drop just to drag.
Behavior is also very ok, google map inside div still drags fine without window. thanks a lot!!
I actually applied it on the cluetip plugin (drag a show help) as it was giving me some issues in correct placement, I enable dragzoom after the cluetip is show and that also works fine. so it works well enough with the rest. I kinda start owing my life to jquery… since I discovered this …. I can’t get no sleep
Glenn
January 26th, 2008 at 12:57 pm
Hi Fromvega!
First of all, nice piece of code you have! good job!
I would like to contribute with a little workaround in your pluggin for ussing it with the also Jquery impromtu pluggin (http://plugins.jquery.com/project/Impromptu).
The main problem is the div impromptu creates has some left margin assinged on its creation, so you pluggin always move the div those marginLeft pixels to the left.
I have fixed it dettecting and substracting (if applies) those pixels to the “spanX” var which determines the left positon of the dragable object in your pluggin:
(Line 55:)
var spanX = (pos.x - lastMouseX) + Math.abs(parseFloat($(currentElement).css(”marginLeft”)));
I haven’t test it in any browser but FF2, and maybe it will be different with a non negative marging…
Anyway, i thought it could be intersting checking for margins in that “updatePosition” function.
Jabi
January 26th, 2008 at 12:58 pm
Actually the line working with both positive and negative margins would be like this:
(Line 55:)
var spanX = (pos.x - lastMouseX) - parseFloat($(currentElement).css(”marginLeft”));
January 29th, 2008 at 6:33 am
Hi
I’ve made a couple of improvements to your script. I’ve added an onDragStart callback and fixed a couple of bugs. Im using the modified version over at 64squares. If you are interested I can give them to you.
Jonha
January 29th, 2008 at 11:08 am
Hi Jonah,
Yeah, it would be great to have a look at your code. Maybe you could send it to us explaining your additions and the bugs.
Thank you
February 21st, 2008 at 12:37 am
Evening
I am using Sharepoint and trying to get various things working within a CEWP - sometimes that work and sometimes they don’t.
I came across a good accordion piece of jquery code that I got working, then I thought it would be nice drag the accordion around the screen.
I now have it dragging, but the accordion piece has stopped working.
Any ideas ?
Iain
February 22nd, 2008 at 4:22 pm
Hello Iain,
I didn’t read you code, but try calling the easydrag method passing “true” to it. Like the following example. This will enable event bubbling and you will be able to interact with the elements inside the drag box.
$(”#box1″).easydrag(true);
Bye
February 28th, 2008 at 4:06 pm
Beautiful. JQuery rocks and this is a fantastic plugin. EasyDrag indeed!
March 4th, 2008 at 2:47 pm
muchas gracias, muy buen trabajo !!
March 4th, 2008 at 6:47 pm
Im thinking about using this for an administration panel where the admin could move the most import doms to wherever they want. Is there way for the script to remember its location for the next time that user comes back to the page ?
March 6th, 2008 at 10:57 pm
Hello, Bill Lee! To achieve that you may save the position directly into cookies or, what I prefer, you may use a server-side script to save the state and then dynamic generate your Javascript. I may write an example for this later.
March 14th, 2008 at 2:16 am
I looked over your code and found a better way to fix the no id issue. Use the elements instead of their ids.
To do this:
-remove the line with the new Date() hack
-remove every instance of “.id”
-replace every “on” and “off” with true and false respectively
-remove “!= undefined” on line 66
This method is smaller, cleaner and is not affected if an id attribute changes.
March 16th, 2008 at 6:38 am
Great script, thanks for this, how about locking the movements or setting “Dragabble area”
I’m supposed to make a drag and drop callout/bubbles and then adding of text on it.
Any ideas on this. THanks in advance
March 17th, 2008 at 12:31 pm
Hello Graig, thanks for the insight! I’m going to address this when I find a little time to mess again with EasyDrag. Bye!
March 17th, 2008 at 12:35 pm
Hello fedmich, to lock movements you can use .dragOff() so you won’t be able to drag the element until you call .dragOn(). But there are a lot of requested features that I plan to implement as I have more spare time, like limit area, drop area, handles etc. See you!
March 17th, 2008 at 12:50 pm
limit area would be nice, I need it more than the other features now. Anyway, good luck on your programming and your blog
March 17th, 2008 at 2:17 pm
Fedmich, EasyDrag was created to be used as a base for future implementations. So if you want to write your own code for the “limit area”, it shouldn’t be that difficult. You could use .onDrag method to get the boundaries of the draggable object and compare it with the boundaries of the “limit area”.
If you check the previous comments you will see that I have discussed this before and that I also developed a quick and crude example of this.
Here are the links to save you time:
http://fromvega.com/code/easydrag/drop.html
http://fromvega.com/code/easydrag/prison.html
They need polish to allow a more generic usage. But I hope they can give you a good insight!
March 18th, 2008 at 2:47 pm
Thank you, thank you for this plug-in.
I used it to poke fun at Hillary Clinton:
http://gielladesign.com/fun/hillary/hillary.html
You made it so easy to create the effect I wanted. It took me seconds to write the code.
March 26th, 2008 at 6:52 am
Nice plugin.
Thanks a lot!
April 3rd, 2008 at 3:01 am
Hi,
This one is a very good plugin.Even after hiding the layer the “plus” symbol exists in Internet Explorer but in Mozilla it is working fine.I want to remove the “plus” symbol.Please help me.
April 3rd, 2008 at 2:13 pm
Hello Arun, what do you mean by the “plus” symbol? I suppose you mean the arrows that appear over the divs that can be dragged, correct me if I’m wrong.
So how are you hiding the div? You should try “display: none;” if you are using “visibility: hidden”. If it doesn’t work you can always change the cursor type of the element, like this: “cursor: default”.
Bye!
April 12th, 2008 at 4:06 am
Any solution for this scenario…
I have a parent div which consist of two parts. One head and body part. After clicking and dragging the head part, the whole parent div (head + body part) should move.
Pls gime a soln….
April 14th, 2008 at 5:34 pm
Hello Dilip,
As I said before, this plugin doesn’t provide all features as its main goal is to provide a base functionality for drag and drop.
But basically, to obtain the effect that you need, you should update the body element position in accordance with the head position every time it changes. Using ondrag() you can track the position of the header element.
I’m looking forward to code all requested features in the near future!
Keep an eye for the updates!
April 18th, 2008 at 10:06 am
Hi fromvega,
Thanks for your great plugin! I’m a novice in JavaScript and tried to use native jQuery UI instruments for dragging, but they are too heavy and leaks some features, as for me.
I’m using your plugin to develop an online city map (http://etabua.net/tmap ). It’s on an early stage of development, but when i’m clicking the map with any instrument, it has been moved 1px left and 1px top all the time. I have to reset it to it’s default position all the time. I activate dragOn() only when the Hand tool is being selected. All other instruments have dragOff() call instead.
Thanks for help.
April 21st, 2008 at 6:30 pm
Hi, this is a great plugin. The only little issue I see is in the Safari browser, the cursor with crosshairs doesn’t change to the pointer(hand) icon when mousing over links in a draggable popup window. Probably more of a safari issue than a bug, as this works flawlessly with IE6, 7 and FF 2.
May 3rd, 2008 at 12:01 pm
Excellent plugin, I only needed on added feature, the ability to manually force the same effects as the onmouseout action. The code was simple, here it is, feel free to add it into the plugin if you like:
// force the same action as onmouseup
$.fn.stopDrag = function () {
isMouseDown = false;
if(dropCallbacks[currentElement.id] != undefined){
dropCallbacks[currentElement.id](e, currentElement);
}
return false;
};
I needed this mostly because I have a scolling DIV (overflow:auto) inside the draggable container.
- Stevan
May 12th, 2008 at 12:20 pm
Nice plugin, but is there a way to restrict the draggable div inside another container div?
May 12th, 2008 at 12:25 pm
Ahh.. I just saw comment #20 with the answer I need.. Thanks alot
May 19th, 2008 at 8:43 am
Hi,
Thx for your plug in. I have used it as a fundation for a Drag & Drop and Resize plugin :http://batiste.dosimple.ch/blog/2008-05-18-1/
OSS FTW
May 20th, 2008 at 4:15 am
Thanks for this wonderful code, the Jquery draggable event don’t seems to work with me.
Realy nice work.
May 26th, 2008 at 6:21 am
Its really nice to know how Jquery helps….thanks mate….
May 30th, 2008 at 8:44 am
Great plugin. Was looking something like it.
Del.icio.us && digging right away…
Thanks yet again.
June 23rd, 2008 at 6:47 pm
I will create a customizable story book. In the middle of the page I will have a DIV that will represent the book page. On the right side I will have some 3/4 characters, 10 accessories and so on.
I want to drag’n'drop the elements into the book page and then get the coordinates of each object dropped into the div since I want to save these coordinates for later print the book. I also want if the user drag’n'drop the character outside the page div move it to the original place.
Do you know of something similar to what I am looking for? Maybe a similar situation or solution?
Thanks in advance to all the community!
June 25th, 2008 at 5:33 pm
I’m developing a fun little site that works like a Mac/Linux OS for my band’s website. I love this plugin that you have but I am trying to make it work like a handle. Any input as to how to make a child div the dragable object that drags the parent div?
June 26th, 2008 at 6:25 pm
Hi Pablo A and Lapubell, I got some time and I will try to code this requested features today. Keep an eye for updates!
June 26th, 2008 at 6:33 pm
that would be way too awesome! got a paypal donate button? I love supporting OSS projects…
you jquery coders are awesome. i’m still wrapping my brain around good ol javascript.
June 28th, 2008 at 12:41 am
Hi Lapubell, just wanted to let you know the code for the handler is done but I’m having a little problem with the ftp, so that’s why I didn’t upload the code yet! Hope to have it solved soon.
June 28th, 2008 at 12:52 am
Lapubell, please download the new code from this temporary url:http://fromvega.com/wordpress/wp-content/uploads/2008/06/jqueryeasydrag-handler-test.js
So here goes a little explanation: for the handle to work it must be a child of the element you want to drag around. Then you call .setHandler(’handler_id’) to make it work.
$(”#box2″).easydrag(true);
$(”#box2″).setHandler(’handler3′);
You should pass ‘true’ to the easydrag() method to enable event bubbling. Maybe it should be automatically set when calling setHandler(). I’m going to wait for some feedback before posting the new version.
Bye!
June 29th, 2008 at 9:11 am
Awesome!Thx for the nice script.
regards from China.
July 2nd, 2008 at 5:07 pm
this is working fantastically.
the OSX/Linux layout is coming along greatly! to see the progress of the page go tohttp://www.aneveningwithdotmatrix.com/os.php.
the only windows that work currently are the home, about and music, but it’s coming along nicely!
thanks to your awesome revision!
PS, there is a catch to see if you are using internet explorer, so if you are using that, you won’t be able to pass. I recommend FireFox 3.
July 2nd, 2008 at 5:47 pm
Lapubell, I’m glad to see it has been useful for you! Your project looks cool! Just a tip, differently from my previous comment, you shouldn’t need to pass “true” to the easydrag() method anymore if you are calling setHandler() after. Give it a try!
July 15th, 2008 at 12:49 pm
i love this plugin!
i am running into a bit of trouble when i add in a drag/drop handle though. i get the following error on FF2 whenever i click inside the div i’ve setup as the handle:
handler.apply is not a function
http://localhost:2630/contracts/js/jquery-1.2.6.js
Line 2076
July 15th, 2008 at 12:59 pm
i hate to do this, but i edited my jquery.js file adding in the following check for undefined, and things are working fine now:
if (handler.apply != undefined)
July 15th, 2008 at 1:29 pm
Hello randy, at a first glance it seems that something is wrong with your code. What is this .apply() method that you are calling? Give it a check!
July 15th, 2008 at 2:16 pm
wow that was quick!
i didn’t explain myself very well. sorry about that. my (temporary) fix for this issue was to hack the jquery-1.2.6.js file itself. which is terrible, i know. i imagine that i may find my “fix” has broken something else, but so far so good. i am truly surprised it worked at all.
if you grab the jquery-1.2.6.js file and look at line 2076, that is where the error is reported to occur. when i added in the check (see my 2nd comment) the error went away.
July 15th, 2008 at 2:49 pm
hi randy, the error is reported there but I’m pretty sure it is caused by something other than jQuery code, maybe something wrong with your code.
July 16th, 2008 at 12:14 pm
i took another look at this, creating a very stripped down example. with no script besides a call to .easydrag() and a call to setHandler(), but i am still seeing the error. my html is pretty basic, i’m using a div for the draggable box, and another div inside this to pass to the setHandler() call.
personally i think it’s ok to have no handle on the draggable window, BUT without the handle, another bug occurs. my draggable div contains a textarea and it seems like you cannot click on the textarea when there’s no handle setup. the user must tab into the textarea to begin using it.
July 16th, 2008 at 12:33 pm
hey randy, it’s not a bug… there is a section in the article that explains that. What you just need to do is to pass true to the easydrag method, like $(”#box1″).easydrag(true);
July 16th, 2008 at 12:40 pm
sorry about that, my previous comment was a bit unclear. i was passing true to easydrag(true) and i also tried passing in false and passing in no parameter at all. if i had a website handy where i could post my example i would do so.
again, thanks for your quick follow-up!
July 16th, 2008 at 12:42 pm
I’m going to verify this. Thanks!
July 16th, 2008 at 1:18 pm
I’m also getting the handler.apply error, and also have the issue that without the handler, the event bubble doesn’t work and the user cant use the form. Other than that - bloomin marvelous. I love it when a plan comes together…
July 16th, 2008 at 1:53 pm
Hi Andiih and Randy, I have just posted a new beta version with this bug correction. Please download the new version and give it a try!
Randy, I have tested the text box withing a draggable and it worked fine! Please let me now if you are still facing this problem!
Enjoy!
http://fromvega.com/code/easydrag/jquery.easydrag.handler.beta2.js
July 16th, 2008 at 2:08 pm
EASYDRAG IS THE SHIT!!!
thanks for that update. as to my issue with the textarea, that seems to have been a hallucination…it works fine now for me in both FF2 & IE7.
July 17th, 2008 at 5:50 am
Yep, thats sorted that problem out. Thanks for such quick feedback. I also took a second look at it without the handle. Although with event bubbling on, it does “work”, the usual mouse gestures such as selection (highlighting a chunk of text in a textarea) still cause a drag action instead which is undesirable. With the handle, this isn’t a problem. Perfect.
July 21st, 2008 at 3:52 am
Great,I really appreciate it.
July 30th, 2008 at 4:31 am
How to get the position of one item to be dragged; his position before any drag.
The $.fn.ondrag function fire each time the mouse is moved while the mouse button is pressed
August 3rd, 2008 at 1:10 am
Hi olaf, EasyDrag per se doesn’t provide a method for that. But you can always use plain javascript or jQuery to get the position of the element. Most of the times you can simple read its ‘top’ and ‘left’ css properties.
August 13th, 2008 at 11:30 am
hate to ask this, but how to drag a clone?
I’m building this drag things into one thing, and then the container onto another place, and could use a clone for a copy rather than move operation. (or is that something left to the user to implement).
BTW - this is great code and has simplified my life tremendously.
August 13th, 2008 at 1:32 pm
Hello blakef, I’m not sure if I understood your question. Do you want to clone an element by creating a copy of it and placing it in the same relative position inside another container? If it is what you want, this plugin doesn’t help but you can simply set the new element position based on the original one (assuming they are relatively positioned) by copying its x and y properties.
August 13th, 2008 at 3:27 pm
hello fromvega,
thanks for the prompt reply, and sorry for the confusion (lack of sleep)
I want to have the orginal item left and a copy dragged when I start the drag. Might have to do this for a list of items (it’s messy) and targets, so one item might go to many targets (hence the need to drag copies).
so something like $(”#box1″).clone().easydrag()?
(sorry, new to jQuery, so if it’s intrinsic, I apologize, hints appreciated).
August 13th, 2008 at 8:28 pm
Hello blakef, unfortunately the current version of this plugin doesn’t have a “drag clone” feature out of the box. Although it’s a good idea for future versions! I have tried something here, it works but it has some problems positioning the element according to the mouse pointer. Sorry, I don’t have much time at the moment to spend with it. But I hope it can give you an idea to start. Voilà:
$(”#box1″).mousedown(function(){
$(this).clone().insertAfter(this).easydrag().mousedown();
});
Note that you don’t need to call easydrag for #box1 since it’s going to stay static. Please post back if you find a better way.
August 20th, 2008 at 7:10 pm
Excellent plugin. Great work.
Using beta2, one feature/bug: After calling .dragOff(), the element’s cursor retains the move pointer. From a user interface perspective, it probably makes more sense to return the element to it’s previous cursor — because otherwise it still looks draggable. Might be nice to save the cursor value when easydrag is instantiated, and then reset the pointer to that value when dragOff() is called.
Thanks.
September 1st, 2008 at 3:53 pm
I tried hacking this to make it drag a background image (position). Any idea on how to set lastElemLeft to be able to pick up the last left position of the background image? (tried using backgroundPositionX, but that didn’t work.)
September 19th, 2008 at 3:04 am
Hi,
I am jquery n00b.
Is there any drag and drop event calendar in jquery.
I have a calendar full of events.. user wants to drag the event from one date to another date.
Please guide me.
Regards
David
September 26th, 2008 at 5:22 pm
When we’l have a .onStartDrag event?
September 28th, 2008 at 2:04 am
Is it possible to set the handler to a tag?
I have multiple windows that i want draggable by the same tag and would like to set them with one line.
jQuery(’.draggableWindow’).easydrag();
jQuery(’.draggableWindow’).setHandler(h1);
or something similar
If its not available currently, how hard would that be to add on?
September 28th, 2008 at 2:52 pm
Never mind, Just changed some code and got it running fine
Just as a suggestion i think it would be better to leave it open, such that you could have the handle be something with a particular class, id, or tag, using the . , #, or nothing respectively with the name for it…
September 29th, 2008 at 9:46 am
David, this is something you will need to implement. You need to use drop targets do detect when an element is being dropped inside another one. EasyDrag doesn’t provide it by default although you can use it to implement this feature. You can have a look at this example to have an idea how you can accomplish this:http://fromvega.com/code/easydrag/drop.html
October 7th, 2008 at 9:05 pm
Very nice plugin thank you very much but i want to save the last position of the drag. can you please make an example for this?
October 8th, 2008 at 5:41 pm
Thanks very much for this plugin - first used it near the start of the year but had problem with not being able to highlight text in a textarea contained on the draggable div. I see this has been addressed with the ‘handler’ and it now does exactly what i need. great plugin.
October 29th, 2008 at 11:24 am
[…] Easing Plugin. jQuery Portlets. AutoScroll. Innerfade. 拖放插件(Drag and Drop)UI/Draggables. EasyDrag jQuery Plugin. jQuery Portlets. jqDnR - drag, drop resize. Drag […]
October 31st, 2008 at 2:42 am
[…] EasyDrag jQuery Plugin. jQuery Portlets. jqDnR - drag, drop resize. Drag […]
October 31st, 2008 at 10:44 am
[…] EasyDrag jQuery Plugin […]
November 23rd, 2008 at 5:53 am
Hey great script. Is there any way to get the absolute position of the clicked object? Calling target.css(’left’) or ‘top’ only returns the left and top cords from where the target originally was positioned. What i’m trying to accomplish is where the object is located over top of an image. Any thoughts? Thx
November 24th, 2008 at 8:54 pm
Hey Jono and Abra Melin (sorry for the delay dude), if you don’t have problems in using another plugin I would suggest you to try the jquery Dimensions plugin. It provides you complete positioning information of the element. You can get it here: http://brandonaaron.net/docs/dimensions/
December 2nd, 2008 at 11:40 am
I’m getting an error on this page. It looks like you have a parse error, line 134.
$(function(){
// add drag and drop functionality to #box1
$(”#box1″).easydrag();
// set a function to be called on a drop event
$(”#box1″).ondrop(function(e, element){ alert(element + ” Dropped”); });
});
It looks like you have a “” and “” tag in your script.
December 2nd, 2008 at 11:41 am
comments stripped out the tag above… [p] and [/p] tags.
December 2nd, 2008 at 12:20 pm
Thanks Doug, I think the code got messed up when I was editing it through Wordpress.
January 13th, 2009 at 7:44 am
can i save the position of this item after the drag
February 25th, 2009 at 4:12 pm
I’m trying to display this under a lightbox - any clues how to achieve this?
thanks in advance!
February 25th, 2009 at 6:14 pm
w00t - fixed myself. Anyone else doing it, I changed this:
$(this).css(”z-index”, parseInt( new Date().getTime()/1000 ));
to this
$(this).css(”z-index”, parseInt( 1 ));
March 18th, 2009 at 2:39 pm
Absolutely brilliant, thanks a lot! By the way, is there a minified version available? Thanks again, Mat.
March 19th, 2009 at 3:05 pm
Matthew, I’m sorry but no, there isn’t a minified version available but you can easily find the tools to minify it online.
March 31st, 2009 at 12:36 am
Hi, I am from China, I think you write well, respect:)
June 8th, 2009 at 8:14 am
Nice plugin mate. Is there a way you can constrain the div element being dragged within another container i.e. containment?
June 21st, 2009 at 2:04 am
I would like to have certain specific elements have a greater z-index than inital set vale as lorenzo suggests, however am not sure what extra jQuery code i need to do this, have tried
$(”.bridge”).css(”z-index”,”50000″); but dosent seem to have any effect, if anyone can point me in right direction be much appreciated
July 30th, 2009 at 3:11 am
I’m a Wordpress newbie and a PHP and Javascript newbie too. I’m trying to manually install the jquery.easydrag.handler.beta2.js by adding a line to [script-loader.php], but I can’t figure out what to add. I uploaded your JS file to /public_html/wp-includes/js/easydrag/ (I created the “easydrag” folder).
Any assistance would be greatly appreciated.
September 27th, 2009 at 4:11 am
Hi,
Anyone know how to make this work with FANCYBOX?
September 28th, 2009 at 11:22 am
Hello I would like to change my z-index
I have for divs and when I click the div I would like to change the position of the z-index to be in the top of the divs.
Sorry for my english. I speek Spanish
December 10th, 2009 at 11:00 am
It’s a great plugin, thanks.
May I request a feature?
I would like to right click on the dropped target to let it go back to where it was from.
Sorry, I don’t know if it’s possible to do that.
Thank you for your efforts.
December 14th, 2009 at 2:58 am
Hi Jonah,
It would be great to have a look at your code.
… thank you/
January 22nd, 2010 at 1:25 pm
Nice plugin. But it have problems in ie7 with absolute right positioned elements. for example:
#id{
position:absolute;
top:75px;
overflow:visible;
right:75%;
z-index:3;
}
January 22nd, 2010 at 1:28 pm
For fix my problem you must give width to all your draggable divs
February 2nd, 2010 at 3:09 am
Awesome stuff! I can’t wait to start getting into jQuery.
February 18th, 2010 at 11:35 pm
how can i write inside the box. because when we use this query we can’t choiice any word inside the box
March 31st, 2010 at 3:34 am
is there way with this plugins to drag div into the specific target div only ?
and once it find target div and dropped it should draggable = false.
one target div has its specific div to drop into it.
thank you
Vasim Padhiyar
May 25th, 2010 at 8:12 pm
Nice plugin thanks!!!
In the setHandler method you should probably change:
// change handle cursor type
$(”#” + handlerId).css(”cursor”, “move”);
// bind event handler
$(”#” + handlerId).mousedown(function (e) {
holdingHandler = true;
$(draggable).trigger(’mousedown’, e);
});
// bind event handler
$(”#” + handlerId).mouseup(function (e) {
holdingHandler = false;
});
To something like this:
var handler = $(handlerId, draggable);
// change handle cursor type
handler.css(”cursor”, “move”);
// bind event handler
handler.mousedown(function (e) {
holdingHandler = true;
$(draggable).trigger(’mousedown’, e);
});
// bind event handler
handler.mouseup(function (e) {
holdingHandler = false;
});
avoiding having to set the handler by id
Good work on the plugin
May 31st, 2010 at 3:15 pm
Hey,
First of all, thanks. Works great.
This script can be extended to make a slider control.
example: http://www.manutechnica.com/slider/
It still needs some work.
June 12th, 2010 at 3:48 pm
I’ve changed the fixed z-index to this to make the dragged element always go to the top of the page:
// set z-index
if (window.lastdraggedix == null) window.lastdraggedix = 0;
$(this).css(”z-index”, ++window.lastdraggedix + 1000);
June 29th, 2010 at 8:41 pm
Very big thanks! It’s a simple, but nice plug-in! I like to have it!
July 1st, 2010 at 9:04 pm
Hi, there - great plugin.
Having a problem when my dragged element has scrollbars. After you scroll, the mouse gets stuck in drag and I can’t get it to release the element.
Any ideas?
Thanks!
July 4th, 2010 at 6:55 pm
Hey,
First of all, thanks. Works great. Good work on the plugin
July 11th, 2010 at 11:11 am
Script saved me a lot of time thanks
August 3rd, 2010 at 10:27 pm
Hello, loleg __ Thanks for you idea, I change it to
_______________
if (window.lastdraggedix == null) window.lastdraggedix = 0;
$(this).css(”z-index”, ++window.lastdraggedix + 10);
_______________
September 28th, 2010 at 2:37 am
Hi, I have fund that when we just click on easydrag obj but not hold the mouse to move the obj, the function “ondrop” will run.
I think is a bug ~
October 2nd, 2010 at 7:55 am
same problem as anna
Having a problem when my dragged element has scrollbars. After you scroll, the mouse gets stuck in drag and I can’t get it to release the element.
February 1st, 2011 at 10:24 am
Hi,
Same problem is here as above. Any solution for that?
February 28th, 2011 at 8:27 am
Hi,
I want to translate article ‘EasyDrag jQuery Plugin’ (http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/) to Belorussian language, which is my mother tongue.
When I”ll be done I’m gonna send to you a link to the article. Is it ok with you, don’t you mind?
Do you prefer email or IM for contact (if any questions regarding the translation arise)? What instant messaging client (if any) do you use? AIM, MSN, Skype?
–
Regards,
Martha Ruszkowski
March 8th, 2011 at 6:30 am
Hi
I need the following
Inside a restricted area (can be a circle) the user organizes several icons in whatever shape she wants, and the server saves that shape for her using the icon’s coordinates. Basically two questions:
1. how to restrict the area
2. how to get the coordinates after drop
thank you
March 30th, 2011 at 9:51 pm
Heyyy!
Got a presentation on jQuery to hold tomorrow!
8 more hours to go!
You helped me outta it - thanks a ton
May 13th, 2011 at 6:52 am
Found this post while researching jquery drag and drop functionality. I’m having some difficulty detecting when an element has been dropped inside another one. Thanks for the files, gave me some good pointers!
May 27th, 2011 at 10:17 am
thanks for you post, i am just wondering if there any drag and drop calendar in jquery?
August 3rd, 2011 at 9:05 pm
Hello
Great job, its very usefull.
I have a question about the plugin.
User drags an element and when its dropped there can be called function event .ondrop. Is there posibility to validate drop position and request to the plugin to restore previous position of the element.
for example:
user has to drag an element tu allowed arrea. When he drop the element in restricted area then i want to get back the element to start (previous) position.
Can it be done ?