jQuery Drag And Drop Sample
December 2, 2008I was playing with jQuery today and was able to create a simple demonstration of its draggable/droppable function. Most know this as “Drag and Drop” functionality.
Just wanna share with you what i just made. The sample i made counts all the items and the total of each item dragged to the drop zone. It would pop an alert when the drop zone is already full. So far, I have tested this in Firefox and IE 6 and works fine.
this is the header script:
this is the body script:
Here is the screenshot:
You can download the zip file here: Drag and drop.zip
HTH 
A Univeral Builder for Drag and Drops (free, based in jQuery):
http://mynichecomputing.org/GuideInfoandPlanner/UniversalDD.htm
nice post..
can u made some like this with connection to mysql !!
sure, that’s a great idea
thanks
nice tutorial, better than ui droppable tutorial at jquery official site
@kalong,
thanks for dropping by
jhoy
dude.. attached sources are not working with ie7,however working with Mozilla…but i desperately searching for ie support.can you help me in resolving problem
@prasad,
hi! i re-tested the files and it is working in my IE6.
jhoy
Thanks for Quick Response dude..
its not working in IE7.
hi,
lemme install IE7 first
ok…Thnks for your time…
–Prasad.
hi prasad,
i just tested it in IE7 and it is working fine. what seems to be the problem?
jhoy
i couldnt able to drag and drop the items
how to restrict the item to drag and drop not more than one time.
just change this part
“if(itemTotalCtr >= 10)” to “if(itemTotalCtr >= 1)”
HTH
thanks, but i want each item to be drag only once.
for example, if dropped dog, then again i should not dropped dog in the box.
i see. we need tweak the code for that. ill try to modify it and send it to you but it would be after a couple of hours coz im busy right now. will that be okay?
Hey,
scvinodkumar : i want each item to be drag only once.
for example, if dropped dog, then again i should not dropped dog in the box.
once you have dropped dog in the droppend box,you jus apply remove ui-draggable feature on that dropped item,it will remove out the draggable feature of item.
for example : item.removeClass(“ui-draggable”)
above i have given small tip,please let me know in case of any issues,
Prasad.
yeah thanks very much
hi, i have added some code for this
var itemArray = new Array();
if(jQuery.inArray(dropElemId, itemArray)==-1)
itemArray.push(dropElemId);
else
{
alert(‘You have already moved this item’);
return;
}
very nice! did it worked as you wished?
Yeah! thanks for this great plugin
you’re welcome! glad it helped
Hi jhoy imperial, also could you tell me how to delete the items that are dropped into the box
sorry, but i haven’t tried that though.
ok, let me try. can i have ur mail id
Hi jhoy imperial,
I updated the latest version of jquery, but it is not droppable. Could you please check it. since i am using with jcarousel
sure! what should be its functionality?
Hi jhoy,
Its a neat example!
-Wali.
Hi there, very nice tutorial.
Thank you.
thank you
hi,
thanks for ur code but where are the css for that
Hello Jhoy,
Is there any way to implement two way drag and drop..? Mean I should be able to do normal drag-drop, also the dropped items should be draggable, so I can drag those to another droppable region.
I have multiple area on the page, all areas are droppable and draggable, so how it could be implemented in such a way that.. everything works?
Thanks,
Sajal