Download dragable content script

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download script

You can download the entire script from this Zip file.

Configuration

You make elements draggable by assigning them to the class "dragableElement". Examples:

<img src="images/image1.jpg" style="float:left" class="dragableElement"> <div id="keyText" class="dragableElement">You can drag this box as well as the images on this page</div>

These are some examples take from the demo.

Remember position and z-index in cookie

You can configure the script to remember the position of the dragable elements in a cookie. This is done by adding lines like this

right above the place where you include dragable-content.js.

Rate this script at Hotscripts.com

Update log

June, 14th, 2006 - New feature: Remember position and z-index in cookie

Comments

Absolutely amazing script.

Just one problem, if you make a text field a movable object it wont let you click the box and insert content, is there anyway around this?

I have been looking for something like this but with the text field for weeks and would be so grateful if you could help me, thank you.

Mike Turner at 03:43AM, 2011/03/19.

i have the same problem as mike!!! help me please!

dani at 06:47PM, 2011/07/03.

Admin comment

Hi

I have added a fix to this problem. You can download a new zip file or simply change line 94 to:

if(source.tagName.toLowerCase()=='input' || source.tagName.toLowerCase()=='textarea')return;

i.e. simple return; instead of return false;

DHTMLGoodies at 04:23PM, 2011/07/06.

Hi, I have a site that already has draggable items. All I need to add is the bit that makes the positions of the dragged items be remembered. The Demo you have on here works fine, however when I download the stuff from the link, I ca't get those files to work.

I've tried to follow the instructions above but I can't make it work.

Any help would be good.

Thanks.

James.

James at 04:00PM, 2011/08/01.

Demo scripts do not work on their own, they are missing one line that should be placed at the end of your web page(s).

<script type='text/javascript'>initdragableElements();</script>

It is in the demo on this site, that's how I found the difference from the download files.

Paul Crinigan at 12:07PM, 2011/08/16.

Admin comment

Thanks for notifying me of this.

The download package has been updated.

DHTMLGoodies at 01:53PM, 2011/08/16.

No problem, I have been using your scripts for years :)

One more thing I noticed, when using google chrome or firefox, the code seems to break. I use hidden divs on my page which overlay when shown, in IE it works great, I click my link and the div is shown and is dragable, however in chrome I can't get the div to even be shown. All I did was add a span tag wrapped around my entire div, and the span has the dragable class assigned to it.

Chrome is extremely strict, so might be a minor thing, just something to check out since it may affect other scripts of yours as well. If I find a solution, I will post it.

Thanks for all your help and great scripts over the years.
Paul

Paul Crinigan at 08:31AM, 2011/08/18.

I am trying to upload a bunch of my graphics to my website I just got from justhost. I was wondering if this script would work for me and if so, how do I use it? I am soooo frustrated. I have been trying to figure out how to just drag my graphics around and organize them to utilize all spaces on a page. Please, please help me! I am desperate!

Sandy at 06:25AM, 2011/11/27.

Admin comment

Sandy,

What exactly do you want the script to do ?

---
Alf

DHTMLGoodies at 07:48PM, 2011/11/29.

Sir i have a Point of sales system where i can drag products to a sales panel like here in this link http://www.jeasyui.com/tutorial/dd/dnd2_demo.html

<p></p>can somebody help me where i can input a quantity let say a textbox? and a remove button here in this particular link.

<p></p>can you edit the lines of code there and come out with inputed quantity and a remove link

<p></p>and somehow to print a receipt afterwards
<p></p>thank you advance

cchalkdust@yahoo.com - can someody email me the answer to my problem thanks :)

Hailey Smith at 09:11AM, 2012/01/17.

http://www.jeasyui.com/tutorial/dd/dnd2.php -this is the link where you can download the code

Hailey Smith at 09:13AM, 2012/01/17.

Perfect!!! Just what I had been looking for for the past 24 hours

Melanie at 12:03AM, 2012/02/24.

how do i lock the the movable items so unauthorized users cannot move the items and authorized ones can?

thank you

ronny at 02:13PM, 2012/02/27.

The problem with draggging elements that have forms with inputs and textareas is the cloning that is done.

If you start typing in a previously empty textarea and then start dragging, the text will be gone.

You will also run into problems, if you submit your form via a javascript...

David

David at 11:29AM, 2012/03/31.

<a href="#comment1281">Hailey Smith wrote:</a>
Sir i have a Point of sales system where i can drag products to a sales panel like here in this link http://www.jeasyui.com/tutorial/dd/dnd2_demo.html

<p></p>can somebody help me where i can input a quantity let say a textbox? and a remove button here in this particular link.

<p></p>can you edit the lines of code there and come out with inputed quantity and a remove link

<p></p>and somehow to print a receipt afterwards
<p></p>thank you advance

cchalkdust@yahoo.com - can someody email me the answer to my problem thanks :)

mail me too hendi_yanuar@yahoo.co.id

hendi yanuar at 04:52AM, 2012/05/02.

Hi, great functionality. I was wondering, how can I retrieve the coordinates of each div or element so i can save them in a database?

I would like this so that when the user returns, all divs etc... are in the positions that they left them in.

Cookies will not work for this as they may use a different computer.

Thanks

Nick

Nick at 01:07PM, 2012/07/24.

Hi,
I love the script, but is there anyway of adding to the cookies the visibility of the div boxes so they are remembered?

I would also like some of the div boxes to start as hidden??

Please help

carl at 03:50PM, 2012/09/19.