Reading time: 6 – 9 minutes
I’ve decided to get back at jQuery draggable and droppable to a personal project I’ve been working on. In the past, I’ve demonstrated how to do basic drag and drop, but this time I needed something a little bit more elaborated.
I won’t spoil my personal project by showing what it before it gets done, but I’ll show here an example of what I wanted to accomplish which will use pretty much the same functionality, but in other application.
The idea is:
I have a stage where I have a bunch of components that should be dragged from one side to another. Those components have to be cloned, and not totally dragged as I might want to use them more than one time.
A sketch of it would be on the lines of:
As you can see, my icons need to stay on the left, but a clone of it can always be dragged to the right. This is not a finished version, but show pretty much all of the steps I had to follow in order to accomplish it. It’s not a simple solution, and did involve loads of researching and asking around. The jQuery’s documentation is not really vast, and does not cover (and should not really) every single example.
I start with importing all my necessary libraries from Google Servers.
<!-- import necessary libraries -->
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.3");
</script>
<!-- Include stylesheets -->
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />
Then I start with my JavaScript code for draggable and droppable:
$(document).ready(function () {
//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
containment: 'frame',
//When first dragged
stop: function (ev, ui) {
var pos = $(ui.helper).offset();
objName = "#clonediv" + counter
$(objName).css({
"left": pos.left,
"top": pos.top
});
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop: function (ev, ui) {
var pos = $(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function (ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
counter++;
var element = $(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id", "clonediv" + counter);
$("#clonediv" + counter).removeClass("tempclass");
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv" + counter).addClass(itemDragged);
}
}
});
});
The code above is responsible for the dragging and dropping iterations.
I just want to highlight that even though the draggable component has an attribute called helper, and you can set it to clone, it does not necessarily clone the objects, but give a “false impression” of objects being dragged.
The object only is cloned when it’s dropped at the stage.
Just after I’ve created my JavaScript, I create some HTML to hold it all. It’s really simple and crude, but will do the job and show what’s to be shown.
<div id="wrapper">
<div id="options">
<div id="drag1" class="drag">
</div>
<!-- end of drag1 -->
<div id="drag2" class="drag">
</div>
<!-- end of drag2 -->
<div id="drag3" class="drag">
</div>
<!-- end of drag3 -->
<div id="drag4" class="drag">
</div>
<!-- end of drag4 -->
<div id="drag5" class="drag">
</div>
<!-- end of drag5 -->
<div id="drag6" class="drag">
</div>
<!-- end of drag6 -->
</div>
<!-- end of options -->
<div id="frame">
<span id="title">
<h2>
What do you know?
</h2>
</span>
<table id="tbldevs" border="1">
<thead>
<tr>
<th>
<span id="names">John</span>
</th>
<th>
<span id="names">Paul</span>
</th>
<th>
<span id="names">George</span>
</th>
<th>
<span id="names">Ringo</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end of frame -->
</div>
<!-- end of wrapper -->
It really is very simple and only creates some divs (which will be manipulated), and a table with a bunch of lines.
The css is then applied, so all the images load, and show the pretty stuff.
I’ve added comments to my code, so I think it’s pretty simple to follow it. I’ll be using this same code for a next example which will add a little more functionality to it. In the meantime, you can check the working example or download the code.
And that’s my take on it. Obviously someone might have a better way of doing it, so if you do, by all means bring it on, and I shall update this post.
Hope you enjoy it!
The following Universal Drag-and-Drop Builder may be of interest:
http://mynichecomputing.org/Gu.....rsalDD.htm
It uses some of the jQuery library in parts.
Seems to be a bit of a bug, if you drag one icon into a box on the right, then drag another but drop it in the left column, the previous correctly placed icon disappears from it’s position and replaces the one you just dropped.
@Adam, yes, I’ve come through the same problem, and am now working on a fix for it. I shall update my code once I have some time to work with out what’s wrong.
Thanks
This is gr8 but how do i resize the droped object inside the container please help
Otro mas excelente Drag an drop http://bit.ly/aM85Io
Hi Marcos,
great code!
I have modified your code little bit.
1. Existing code allows only 10 divs 0-10 to be draggable and not more than 10, so i added “+” to ur regex: “[0-9]+”
But one thing I am not able to resolve that while dragging any element second time it can be positioned outside of the containment area. i tried by putting – $(“#otherdiv”).droppable(“disable”);
but nothing seems working.Any idea…
Hey Marcos and Adam,
I got that !
prefix “#” will do the work.
Thanks again for your post. I really had a lot of pain in finding actually what I need. I am feeling the same pain reading your post. Still trying to customize as per the needs.
$(“.drag”).draggable({
helper:’clone’,
containment: ‘frame’,
//When first dragged
stop:function(ev, ui) {
sorry
prefix “#” to frame -
containment: ‘#frame’
Hi All,
I am following the above code for my work,but the only thing is i couldn’t reize the dragged image.If i apply .resizable it’s actually resizing the parent image not the clone. Does anybody have code /suggestion will help me
Thanks,
Dear Author
Reg the post: A more elaborated jQuery Drag & Drop (with cloning)
I follwed your code for Drag,Clone and Drop the images in the div. But in addition i need to resize and rotate the image . If i add .resizable in your code its actually rezing the parent not the clone. In addition i need to know how to delete the clone and save the image in database.
Thanks in advance,
Hi Marcos Placona,
i was searching for this kind of effects for my project. Thank you very much.
Glad it helped you!
Nice,
I’m just starting a project that will require drag and drop and this will come in handy.
I need to be able to move items from left to right, but each item should occupy one position (column in the table) and if another item is dropped on top of it all the items to the right will move one position and their new position is updated in the db.
Thanks
Justin
Hi Justin, thanks for commenting.
Let me know what you have so far, and maybe I can offer you some help if you’re struggling.
Cheers
May be is voluntary, but id=”names” should be unique. Those id have the same name and it’s not w3c compliant.
For the rest, very good drag and drop.
Best regards.
P.S.: Sorry for my english mistakes.
woot, thankyou! I finally came to a site where the webmaster knows what they’re talking about. Do you know how many results are in Google when I search.. too many! It’s so annoying having to go from page after page after page, wasting my day away with thousands of people just copying eachother’s articles… bah. Anyway, thankyou very much for the info anyway, much appreciated.
Really glad you enjoyed it!
You are right (sorry for taking so long to reply). I should really have gotten it by the class, so repeating names would not be a problem. I’ll change it when I have some time.
Thanks
Hi,
I have tested your demo and the code but I couln’t find why when you have dragged an object, you can’t take the same object in the left bar and redragged it to another person ! Can you help me to have this behavior ?
Hi Ludovic, sorry for taking so long. It used to do that, and to prove, it have made changes and posted it here: http://jsbin.com/opifo4/edit
It looks like along the way, jQuery has made changes to the UI, and broken it. If you look on my example above, you’ll see that I’m now loading specific versions of jQuery
google.load(“jquery”, “1.3.2″);
google.load(“jqueryui”, “1.7.3″);
And the example now works exactly how you’d want it.
Hope that helps you.
thank you so much! this is exactly what I need for a project I’m trying to work on
Imagine I have 60 or more items do drag & drop, I am trying to make the left pane scrollable. I figured out the items are called upon with css, would an overflow on the options div do the job?
I’m not really sure what you’re trying to achieve, but if you could give me more examples, I could try and help you further.
Cheers
Hi Marcos!
your code is awesome. Just a little curious about it… what if for example you need to trigger a php script when u put one of the elements inside the table? lets say you want to store the information in a database, is that possible?
thanks in advance!
Hi Marcos!
Your code is excellent and very very helpful for me.
Thanks!
Very glad you you liked it. Thanks for reading
Hello, I tried the example but I have two problèmes.The first is that the icon is only displaceable one time.The second is that I moved the icon becomes stable, ie it is not moved again.Thanks to answer me quickly because I need it to continue my project.
Hi Khalil, the reason why you can only move it once, is because of my specs, I wanted to make the main object draggable, but not its clones. If you make the clone draggable as well, you should be able to move it normally.
Hope that helps you
Really good stuff… Set the wrapper div to position:relative to prevent the icons from “bouncing around” when the window is resized… (just what i needed to make it perfect…)
Thanks a lot!
Thank you Jacob, glad to be of some help
Hi. Thank you for your code. It’s very useful. I want to ask for a little help though. I have an INPUT inside the draggable div. The INPUT in the cloned div loses it’s onfocus events. Can you point me to where to regenerate the events.
This is my div:
Hi, would you like to post your code elsewhere and post the link here so I can have a look?
Cheers
Marcos, the code is too good, exactly what I am looking for.
Is it a must put the image width and height in CSS, is there a way to take it auto from the image?
Thanks
Simon
Hi. Crazy thing happened! Everything stopped working! Is it some browser update? It isn’t just the stuff i did with the code but also the example that you linked above… Any ideas? Just handed in an exampaper with a link to a prototype app that uses this and it doesn’t work:-(
Thanks Jacob
Hi Jacob, thanks for your comment. that will be because along the way jQuery has made changes to it’s API. using fixed versions fixed the problem though.
I’ve modified my example, and also the code above.
Hope that helps you.
Perfect! Thanks a lot! Doesn’t work with the position:relative on the wrapper in FF 4.0 though. Works perfect in 3.6 but for some reason it adds 427.5px left and 23px top when I drop it every time.. Doesn’t matter for now though, i’ll keep playing around with it..
Thanks again!
Jacob
Hi Jacob, thanks again for reporting back. Please do let me know if you find out how to make it work on FF4, and I’ll update the code.
Cheers
Hi All,
Thanks For u all but i use this code but i can`t make resizable to what dragged so i need help and thanks.
ahmed arafa
Hi,
I face problem to retain the clone in the droppable. The image I dropped will either disappear or append to a wrong position.
This is my drop event:
options.drop = function (event, ui) {
// Store the clone position
leftPosition = ui.offset.left;
topPosition = ui.offset.top;
// If ui is an existing image
if (ui.draggable.attr(‘id’).match(/_(\d+)$/) != null)
{
// ** Call UpdatePosition
}
else {
// Create the clone, set its position and append to droppable
counter++;
var element = $(ui.draggable).clone();
$(element).offset({ top: topPosition, left: leftPosition });
$(this).append(element);
}
Can anyone help to figure out the problem??
Really need help here…thanks!!
Thanks for the code!
Is there a version for this code that run o IE9?
If you update the jQuery version to the latest, it should run with no problems. Let me know otherwise.
Hi Marcos, I have a small question.
In the draggable stop: you do reference to #clonediv+counter while in the droppable the clone is created with this ID. Is there any possibility the stop will be executed before the creation of the clone? would this be a problem with this code?
hi marcos Thanks for the code!
the code is not working in IE9 is their any changes required for IE9 browser if plz let me know
It should just be a case of updating the version of jQuery. Try that and let me know
Hello to every one. I need the same thing which you have made it. Thank you. I got help through your demo to make the clone of the elements.
Glad it has helped you!
Thanks a lot for this awesome tutorial! One problem – it doesn’t seem to be working in Ie9 although it works in Ie7
Looks like it’s just the jquery version that is too old. Should work if you update it to the latest. Let me know if it doesn’t
hi marcos, thanks for the code and how to give resize handles to dragged image.
hi marcos thanks for the code and for IE9 place the following code in ui.core.js at the end and before closing of } (jQuery));then this code is working in IE9 also.
(function($) {
var a = $.ui.mouse._mouseMove;
$.ui.mouse._mouseMove = function(b) {
if ($.browser.msie && document.documentMode >= 9) {
b.button = 1
};
a.apply(this, [b]);
}