JQuery拖拽外掛使用及下載
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.
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!
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.
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();
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
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.
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.
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.
And what about Chucky? hehe
-
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
-
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!
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?
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!
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
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!
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.
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!
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;
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
Thank you Stanoo Chang, it works much better now!
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!
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!
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
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
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 :))
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 :))
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!
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!
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.
Thanks a bunch… Was looking for this plugin. jQuery rocks
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);
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!
how to make like this “http://blog.xilinus.com/prototype-portal/test/index.html”
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());
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!
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.
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
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
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!
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?
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…
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!
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();
});
Hello marcin,
I have checked your site but I couldn’t see the click event after dropping!
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
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…
Be nice to add a resize functionality too.
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
Hey Patrick, you can do it with AJAX. Just call the proper function that will make a remote post from inside .ondrop
How to make a title div dragging the box only when the mouse is over the title?
Carlos, you will need to implement this… This script just provides the basic functionality of drag and drop.
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
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
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);
}
Please check out this url:
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.
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!
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.
:))
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?
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.
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
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
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”));
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
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
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
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
Beautiful. JQuery rocks and this is a fantastic plugin. EasyDrag indeed!
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 ?
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.
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.
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
Hello Graig, thanks for the insight! I’m going to address this when I find a little time to mess again with EasyDrag. Bye!
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!
limit area would be nice, I need it more than the other features now. Anyway, good luck on your programming and your blog
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.
They need polish to allow a more generic usage. But I hope they can give you a good insight!
Thank you, thank you for this plug-in.
You made it so easy to create the effect I wanted. It took me seconds to write the code.
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.
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!
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….
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!
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.
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.
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
Nice plugin, but is there a way to restrict the draggable div inside another container div?
Ahh.. I just saw comment #20 with the answer I need.. Thanks alot
Thanks for this wonderful code, the Jquery draggable event don’t seems to work with me.
Realy nice work.
Its really nice to know how Jquery helps….thanks mate….
Great plugin. Was looking something like it.
Del.icio.us && digging right away…
Thanks yet again.
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!
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?
Hi Pablo A and Lapubell, I got some time and I will try to code this requested features today. Keep an eye for updates!
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.
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.
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!
Awesome!Thx for the nice script.
regards from China.
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.
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!
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:
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)
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!
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.
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.
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.
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);
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!
I’m going to verify this. Thanks!
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…
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!
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.
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.
Great,I really appreciate it.
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
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.
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.
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.
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).
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.
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.
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.)
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
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?
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…
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
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?
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.
[…] Easing Plugin. jQuery Portlets. AutoScroll. Innerfade. 拖放外掛(Drag and Drop)UI/Draggables. EasyDrag jQuery Plugin. jQuery Portlets. jqDnR - drag, drop resize. Drag […]
[…] EasyDrag jQuery Plugin. jQuery Portlets. jqDnR - drag, drop resize. Drag […]
相關推薦
JQuery拖拽外掛使用及下載
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 UPD
自定義Jquery拖拽外掛
新增節點，修改樣式 $("body").append("<div>123</div>"); $("body div").attr("id","box") $("body div").css({"background":"red","width"
自建JQuery拖拽外掛
最近由於業務需要，要有拖拽將頁面上控制元件進行一個排序的調整，網上找的控制元件大多不能完美達到預期效果，就自己做了一個小外掛，也記錄一下，畢竟是第一次寫js外掛 外掛程式碼： /** * Created by linxz on 2018/1/8. */ ;(functi
使用jquery.easydrag拖拽外掛的拖拽出界問題
在Iframe框架裡使用了jquery.easydrag.handler.beta2.js外掛，用來拖動DIV塊。 JS程式碼如下： <script type="text/javascript" src="js/jquery.js"></script&
IDEA常用外掛及下載地址
外掛名稱 外掛介紹 官網地址 Alibaba Java Coding Guidelines 阿里巴巴出的程式碼規範檢查外掛 https://plugins.jetbrains.com/plugin/10046-alibaba-
CSDN-----jquery拖拽圖片
JQuery實現拖拽DIV 之前實現的是以純javascript進行圖片拖拽，昨天發現做特效用jquery程式碼量減少了一倍多，實現拖拽的技術難點主要是在拖動結束點的控制，在放棄選擇拖拽目標時要準確的將事件清除掉，否則就會出現滑鼠明明放棄拖拽，目標卻還在移動，學習的小夥伴們最好了解清楚bin
jQuery 拖拽排序（選單，圖片）
無意間看到的一個外掛，引入jquery.min.js，jquery-sort.min.js檔案，網盤地址：https://pan.baidu.com/s/1pSJ0PsVH1uT4mXbf2f0ETg 程式碼如下： <!Doctype html> <html> &
前端拖拽外掛gridster.js介紹與使用示例
gridster.js是一款基於jquery的前端拖拽外掛，效果相當的不錯，大家可以先看看Demo(http://gridster.net/#intro)（藍色部分的白塊就是了，可以隨便拖動，娛樂性很強）。一、更多示例 gridster.js允許使用者做一些自定義
jquery的imgbox外掛及解析
下載外掛：http://www.htmldrive.net/items/download/390 需求：能不能達到這樣的效果：點選縮圖，在當前頁彈出一個彈框，顯示大圖。 https://blog.csdn.net/kangnan00/article/details/72518352 h
jQuery拖拽改變元素大小
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>jQuery 版“元素拖拽改變大小”原型-柯樂義 </title>
【叨、校長】Jquery拖拽佈局例項-Portal
本例項基於jquery官方框架、和jquery easyui官方UI框架編寫，採用jquery.portal.js,jquery.cookie.js外掛，實現頁面拖拽佈局，自動儲存狀態位置！ 線上演示
js實現拖拽外掛
二、JavaScript實現原理簡述在AS3中，使用startDrag()就能實現拖拽，但是js中，卻沒有此方法，但是也是可以實現的，說穿了，挺簡單的。實現拖拽方法不少，我呢，js功力尚淺，只知道一種實現原理。如下：①滑鼠按下+滑鼠移動 → 拖拽②滑鼠鬆開 → 無拖拽③滑鼠偏移 → 拖拽距離用JavaScri
sortable圖片拖拽外掛
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
拖拽外掛使用說明
使用 初始化draggabilly為一個jQuery外掛 var $draggable = $('.draggable').draggabilly({ // 選項（配置）... })123 使用原生js初始化 var elem = document.querySel
jQuery MD5 加密外掛及使用方法
下面是我的簡單例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
div/dom元素拖拽縮放外掛，純js實現拖拽縮放，不依賴jQuery~
產品需求，需要用到對div（dom）進行拖拽縮放操作，看到有好多外掛，要麼依賴jQuery，要麼檔案太大。 封裝了一個外掛，不壓縮狀態下5KB。 html <!DOCTYPE html> <html lang="en"> <head> <
jquery外掛-自由拖拽
最近工作不是很忙，學習之餘想整理一些程式碼出來，首先想到的就是是js拖拽。 兩年前去某公司面試的時候，曾經被問過這個問題，如何在頁面上拖放元素，儘管現在看起來很簡單，但當時的我半點思路都沒有，面試想當然失敗了。 這兩天趁空閒整理出一個自由拖拽的jquery外掛：jquery.jsDrag.js。 js拖拽主
jquery實現對div的拖拽功能
func function .org absolut 移動 posit center sed fun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o
js 利用jquery.gridly.js實現拖拽並且排序
user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
WPF 矩形框8個控制點伸縮及拖拽
控制 struct 超出 brush ldr endpoint ima idt osi 最近在研發圖片控件矩形框8個控制點進行控制邊框的大小、位置等信息，之前查閱了相關的信息，比如別人整合的類:ControlResizer 這個類雖然是好，但是很大程度