<!doctype html>
<meta charset= "Utf-8"/>
<title>drag and Drop</title>
<link rel= "stylesheet" href= "Main.css" >
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
<script src= "Jquery-ui-1.9.0.custom.min.js" ></script>
<body>
<div class= "Container" >
<section id= "Product" >
<ul class= "Clear" >
<li data-id= "1" >
<a href= "#" >
</a>
</li>
<li data-id= "2" >
<a href= "#" >
</a>
</li>
<li data-id= "3" >
<a href= "#" >
</a>
</li>
<li data-id= "4" >
<a href= "#" >
</a>
</li>
<li data-id= "5" >
<a href= "#" >
</a>
</li>
<li data-id= "6" >
<a href= "#" >
</a>
</li>
<li data-id= "7" >
<a href= "#" >
</a>
</li>
<li data-id= "8" >
<a href= "#" >
</a>
</li>
</ul>
</section>
<aside id= "sidebar" >
<div class= "Basket" >
<div class= "Basket_list" >
<div class= "Head" >
<span class= "name" > Name </span>
<span class= "Count" > Quantity </span>
</div>
<ul>
</ul>
</div>
</div>
</aside>
</div>
<script>
$ (function () {
JQuery UI draggable
$ ("#product li"). Draggable ({
Brings the item back to it place when dragging are over
Revert:true,
Once the dragging starts, we decrease the opactiy of other items
Appending a class as we do so with CSS
Drag:function () {
$ (this). AddClass ("active");
$ (this). Closest ("#product"). AddClass ("active");
},
Removing the CSS classes once dragging is over.
Stop:function () {
$ (this). Removeclass ("active"). Closest ("#product"). Removeclass ("active");
}
});
JQuery Ui droppable
$ (". Basket"). Droppable ({
The class that'll be appended to the to-be-dropped-element (basket)
Activeclass: "Active",
The class that'll be appended once we are hovering the to-be-dropped-element (basket)
Hoverclass: "Hover",
The acceptance of the item once it touches the to-be-dropped-element basket
For different values http://api.jqueryui.com/droppable/#option-tolerance
Tolerance: "Touch",
Drop:function (event, UI) {
var basket = $ (this),
move = Ui.draggable,
ItemId = Basket.find ("ul li[data-id= '" + move.attr ("Data-id") + "'");
To increase the "value by +1 if" same item is already in the basket
if (itemid.html ()!= null) {
Itemid.find ("Input"). Val (parseint (Itemid.find ("input"). Val ()) + 1);
}
else {
Add the dragged item to the basket
Addbasket (basket, move);
Updating the quantity by +1 "rather than adding it to the basket
Move.find ("Input"). Val (parseint (Move.find ("input"). Val ()) + 1);
}
}
});
This function runs ONC EAN item are added to the basket
function Addbasket (basket, move) {
Basket.find ("ul"). Append (' <li data-id= ' + move.attr ("Data-id") + ' > '
+ ' <span class= ' name ' > ' + move.find (' H3 '). HTML () + ' </span> '
+ ' <input class= ' count ' value= ' 1 ' type= ' text ' > '
+ ' <button class= ' delete ' >✕</button> ');
}
The function is triggered once delete button is pressed
$ (". Basket ul Li Button.delete"). Live ("Click", Function () {
$ (this). Closest ("Li"). Remove ();
});
});
</script>
</body>
