Also, you ought to post it on jquery.com/plugins/. I’m sure others will appreciate it as well.

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

again in short: could you please provide an example of draggables and accepting droppables?

djot
-

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!

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?

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!

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

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!

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!

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;

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!

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

Thank you very much for your wonderfull script. I guess you heared it pretty much.

Best Regards,

Squitta

So still a workaround is needed :))

Just check out, you will find an pretty old one :))

Thank you for the audience!

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!

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 for the plugin, fromvega!

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());

$(”#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

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

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?

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!

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();
});

I have checked your site but I couldn’t see the click event after dropping!

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

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

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

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);
}

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.

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.

:))

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?

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.

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

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

(Line 55:)
var spanX = (pos.x - lastMouseX) - parseFloat($(currentElement).css(”marginLeft”));

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

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

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

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

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.

Any ideas on this. THanks in advance

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!

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.

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.

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!

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!

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.

- Stevan

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

Realy nice work.

Del.icio.us && digging right away…

Thanks yet again.

you jquery coders are awesome. i’m still wrapping my brain around good ol javascript.

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!

the OSX/Linux layout is coming along greatly! to see the progress of the page go to http://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.

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

if (handler.apply != undefined)

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.

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.

again, thanks for your quick follow-up!

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

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.

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.

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).

$(”#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.

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 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

$(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.

thanks in advance!

$(this).css(”z-index”, parseInt( new Date().getTime()/1000 ));

to this

$(this).css(”z-index”, parseInt( 1 ));

Any assistance would be greatly appreciated.

Anyone know how to make this work with FANCYBOX?

Sorry for my english. I speek Spanish

It would be great to have a look at your code.
… thank you/

#id{
position:absolute;
top:75px;
overflow:visible;
right:75%;
z-index:3;
}

Vasim Padhiyar

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

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.

// set z-index
if (window.lastdraggedix == null) window.lastdraggedix = 0;
$(this).css(”z-index”, ++window.lastdraggedix + 1000);

First of all, thanks. Works great. Good work on the plugin

if (window.lastdraggedix == null) window.lastdraggedix = 0;
$(this).css(”z-index”, ++window.lastdraggedix + 10);
_______________

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.

Same problem is here as above. Any solution for that?

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

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

8 more hours to go!

You helped me outta it - thanks a ton