Example of add to shopping cart using draggable and droppable interaction of jQuery UI

<!–

Using this code you can add some books to shoping cart.When add one book the cart you can’t add this book to the cart again.More animation can be possible but i just test this one and this code is completely made by me.Hope this will be helpfull.

 –>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”jquery_ui_full/jquery-ui-1.8.16/themes/base/minified/jquery-ui.min.css” />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery_ui_full/jquery-ui-1.8.16/ui/minified/jquery-ui.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
var text;
var selected;
$(‘span’).draggable({containment:’document’,revert:true,opacity:.4,
drag: function(){
text = $(this).html();
selected = $(this);
}
});
$(‘#drop’).droppable({accept:’span’,hoverClass:’highlight’,tolerance:’fit’,
drop: function(event,ui){

$(this).append(text);
selected.draggable({disabled:true})
}
});
});

</script>
<style type=”text/css”>
#drop
{
background-color:#9F9;
height:300px;
width:200px;
}
span
{
border:2px solid #0CF;
}
hr
{
width:100px;
height:4px;
background-color:#F0AE7D;
}
</style>
</head>

<body>
<caption>..::Books::..</caption>
<hr align=”left”/>
<span>Teach yourself C<br/></span>
<span>Teach youself C++<br/></span>
<span>Algorithm<br/></span>
<br />

<caption>..::ADD TO CART::..</caption>
<hr align=”left”/>
<div id=”drop”></div>
</body>
</html>

Advertisements

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