Objective: use jQuery to create a shopping cart and wish list with draggable, droppable and sortable functionality.Requirements:Download the jQuery ui files using a theme of your choice.
Download and extract the shop.html file and associated image and css files to use for this lab.
Open up the shop.html file and add the following functionality:
The page already has a link to the jQuery libraries on a CDN. Add links to the jQuery-ui minified .js file and links to the 2 jQuery-ui stylesheets (jquery css file and theme css file)
Draggable images
At the top of the page, there are a series of images (roses, mums and pansies) in a div with an id of gallery.
Select all of the images in the #gallery div and add the draggable widget
Test to see if you can now drag the images around the page.
Droppable cart and wishlist
At the bottom of the page, there are 2 divs with ids of cart and wishlist. These have a heading and a list element (ul for cart, ol for wishlist). They have been styled already with a minimum height attribute to allow room to drag in the images.
Apply the droppable method to the #cart div and to the #wishlist div.
For this application, we do not want to leave the images in the shopping cart and wishlist. Instead, we want to add a list item with the alt attribute to the list element in the div where the image is dropped.
Inside the parentheses for the draggable widget for the cart, add a drop function:
$(‘#cart’).droppable({
drop: function(e,ui) {
// add code here
}
}); // end cart droppable
Inside this anonymous function, add the code to append a list item to the #cartlist ul using the ‘alt’ attribute from the image as the text for the list item. Use ui.draggable to get the image. (ui.draggable.attr(‘alt’))
Repeat for the droppable widget for the wishlist, adding the list item to the #wishes ol.
We want the image to return to it’s old position after adding the item to the cart or wishlist. We can do this by adding revert: true to the draggable widget options for the images.
Test your code. When you drag one of the images over the cart or wishlist div and drop it, it should add the item to the list and then return the image to its original position.
Sortable cart and wishlist
Add the sortable widget to the #cartlist and #wishes divs
We want the user to be able to drag items between the #cartlist and #wishes divs, so add the connectWith: option to wishes with a value of ‘#cartlist’ and to cartlist with a value of ‘#wishes’.
Test your code. It should sort the items properly and move them from cart to wishlist or wishlist to cart, but you will see that it also creates an ‘undefined’ item in the list each time. This is caused by our droppable function that tries to add the
To fix this problem, we need to make changes to our drop functions in the droppable widget as follows:
Add an if statement above the append statement to test if the draggable item has an ‘alt’ attribute. If so, then append the list item using the code we created previously.
// test to see if the draggable item has an alt attribute
if (ui.draggable.attr(‘alt’)) {
// if it has an alt attribute, append the alt text inside of an li tag as before (move the previously created line into the if brackets)
$(‘#cartlist’).append(“
}
Now add an else statement to append a list item to the list with the html of the draggable item as the text instead of the alt attribute:
else {
// if no alt attribute, add a list item using the html from the draggable item as the list item text
$(‘#cartlist’).append(“
}
Test again and you will see that you no longer get the undefined lines. However, it is keeping both the original list item and the dropped list item. So we need to add a second line in our else clause to remove the original item: ui.draggable.remove();
Test on more time and it should work as expected.
Add an effect to an element of your choice on the page
