jquery droppable with click

Posted on 2009-02-11
Last Modified: 2012-06-27

I'm new in jquery and hoping that someone could help me solving my problem. The link above is the closest to what I wanted.

I want to implement shopping cart but instead of clicking 'trash' icon, I want to be able to click on the image it self and move the image to the shopping cart without any fadein/out effect like the demo on the link above

at the end i want to see a button that will alert the array of the <li> id from the item i selected.

Any help would be appreciated
Question by:edyonline
    LVL 16

    Accepted Solution

    Your images are set up within a list?  In that case, you would want to start by binding a click event to the list items:
    $('#ulProducts li').click(function() {
     // Here we'll handle the click

    Now, in the onclick, you'll take care of adding the item to the shopping cart w/ ajax. has all the details you'll need on getting AJAX set up.  You can get the id attribute of the item that was clicked on by doing $(this).attr('id'); within the click handler.  Then, after your AJAX request succeedes, you can remove the li from the list by doing ('li#' + previouslyRetreivedID).remove();

    Does all that make sense / do you need further clarification?

    Author Comment

    yes.. i tried the click function... I'm able to implement click function by clicking <li> object and the object move append to the new list. However, how can I click on the same object on the new list, and have the object goes back to the original list?
    LVL 16

    Expert Comment

    What you would essentially have to do is, after adding the new item to the list, add a click handler to it that does the reverse - move it back to the other list.  If you can provide some code samples I can probably show you exactly how to do it.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now