Learn how to a build a cloud-first strategyRegister Now


jquery droppable with click

Posted on 2009-02-11
Medium Priority
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
  • 2
LVL 16

Accepted Solution

anoyes earned 2000 total points
ID: 23638757
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.  http://docs.jquery.com/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

ID: 23643660
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

ID: 23647491
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.

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses
Course of the Month21 days, 3 hours left to enroll

810 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