jQuery Drag And Drop Sample

Posted on Updated on


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

Drag and Drop code

this is the body script:

Drag and Drop Code

Here is the screenshot:

jQuery drag and drop Screenshot

You can download the zip file here: Drag and drop.zip

HTH🙂

41 thoughts on “jQuery Drag And Drop Sample

    Lor Larson said:
    December 4, 2008 at 1:53 AM

    A Univeral Builder for Drag and Drops (free, based in jQuery):
    http://mynichecomputing.org/GuideInfoandPlanner/UniversalDD.htm

    atoeyz said:
    April 16, 2009 at 12:04 PM

    nice post..🙂

    can u made some like this with connection to mysql !!

    jhOy imPeRiaL responded:
    April 16, 2009 at 12:21 PM

    sure, that’s a great idea🙂 thanks

    kalong said:
    May 15, 2009 at 8:17 PM

    nice tutorial, better than ui droppable tutorial at jquery official site

    jhOy imPeRiaL responded:
    May 15, 2009 at 9:04 PM

    @kalong,

    thanks for dropping by🙂

    jhoy

    prasad said:
    June 1, 2009 at 12:08 PM

    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

    jhOy imPeRiaL responded:
    June 1, 2009 at 12:32 PM

    @prasad,

    hi! i re-tested the files and it is working in my IE6.

    jhoy

    prasad said:
    June 1, 2009 at 12:39 PM

    Thanks for Quick Response dude..

    its not working in IE7.

    jhOy imPeRiaL responded:
    June 1, 2009 at 1:07 PM

    hi,

    lemme install IE7 first😀

    prasad said:
    June 1, 2009 at 1:09 PM

    ok…Thnks for your time…

    –Prasad.

    jhOy imPeRiaL responded:
    June 1, 2009 at 1:19 PM

    hi prasad,

    i just tested it in IE7 and it is working fine. what seems to be the problem?

    jhoy

    prasad said:
    June 1, 2009 at 1:20 PM

    i couldnt able to drag and drop the items

    scvinodkumar said:
    July 2, 2009 at 3:20 PM

    how to restrict the item to drag and drop not more than one time.

    jhOy imPeRiaL responded:
    July 2, 2009 at 4:36 PM

    just change this part

    “if(itemTotalCtr >= 10)” to “if(itemTotalCtr >= 1)”

    HTH

    scvinodkumar said:
    July 2, 2009 at 5:07 PM

    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.

    jhOy imPeRiaL responded:
    July 2, 2009 at 5:32 PM

    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?

    prasad said:
    July 2, 2009 at 5:38 PM

    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.

    scvinodkumar said:
    July 2, 2009 at 6:33 PM

    yeah thanks very much

    scvinodkumar said:
    July 2, 2009 at 10:30 PM

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

    jhOy imPeRiaL responded:
    July 3, 2009 at 1:51 AM

    very nice! did it worked as you wished?

    scvinodkumar said:
    July 3, 2009 at 1:16 PM

    Yeah! thanks for this great plugin

    jhOy imPeRiaL responded:
    July 3, 2009 at 1:59 PM

    you’re welcome! glad it helped😀

    scvinodkumar said:
    July 3, 2009 at 2:31 PM

    Hi jhoy imperial, also could you tell me how to delete the items that are dropped into the box

    jhOy imPeRiaL responded:
    July 3, 2009 at 2:32 PM

    sorry, but i haven’t tried that though.

    scvinodkumar said:
    July 3, 2009 at 2:57 PM

    ok, let me try. can i have ur mail id

    scvinodkumar said:
    July 6, 2009 at 10:30 PM

    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

    jhOy imPeRiaL responded:
    July 6, 2009 at 11:10 PM

    sure! what should be its functionality?

    wali said:
    September 11, 2009 at 1:20 PM

    Hi jhoy,

    Its a neat example!

    -Wali.

    George Garchagudashvili said:
    October 10, 2009 at 10:39 PM

    Hi there, very nice tutorial.
    Thank you.

    jhOy imPeRiaL responded:
    October 10, 2009 at 10:52 PM

    thank you🙂

    pandu said:
    October 30, 2009 at 4:49 PM

    hi,
    thanks for ur code but where are the css for that

    Sajal said:
    November 4, 2009 at 8:18 PM

    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

    15puzzles said:
    November 24, 2009 at 10:04 PM

    Just another Query drag and drop example

    javaghoost said:
    November 25, 2009 at 3:26 AM

    hi, it also may be useful

    javaghoost said:
    November 25, 2009 at 3:34 AM

    hi, it also may be useful

    fiki said:
    April 4, 2010 at 10:35 AM

    it is really cool stuf thanks a lot

    RK said:
    June 16, 2010 at 4:00 PM

    Wow so cool thank you for the article

    migueljimenez said:
    November 26, 2010 at 12:26 AM

    if you want to share the code, why do you publish it in an image?

    Sam said:
    March 18, 2011 at 9:35 AM

    var itemArray = new Array();

    if(jQuery.inArray(dropElemId, itemArray)==-1)
    itemArray.push(dropElemId);
    else
    {
    alert(‘You have already moved this item’);
    return;
    }

    jitendra said:
    August 5, 2011 at 6:00 PM

    i use your code in my project, but ihave facing problem, i want put one image on other image

    jitendra said:
    August 5, 2011 at 6:31 PM

    i want put one image and put another image on same area
    how can

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s