效果图如下：
主页面index.html:
复制代码 代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Drag and drop</title>
<link href="https://www.jb51.net/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.jb51.net/jquery-ui-1.9.0.custom.min.js"></script>
</head>
<body>
<div>
<section>
<ul>
<li data-id="1">
<a href="#">
<img src="https://www.jb51.net/img/T14CBxXaVzXXbGir7U_013755.jpg_160x160.jpg" alt="">
<h3><font color="#8A2BE2">我是第一台打印机</font></h3>
</a>
</li>
<li data-id="2">
<a href="#">
<img src="https://www.jb51.net/img/T2i06FXa4aXXXXXXXX_!!1128692172.jpg_b.jpg" alt="">
<h3><font color="#A52A2A">我是第二台打印机</font></h3>
</a>
</li>
<li data-id="3">
<a href="#">
<img src="https://www.jb51.net/img/T2odyUXf8bXXXXXXXX_!!629457645.jpg_b.jpg" alt="">
<h3><font color="#DEB887">我是第三台打印机</font></h3>
</a>
</li>
<li data-id="4">
<a href="#">
<img src="https://www.jb51.net/img/T2OgebXd8cXXXXXXXX_!!441091394.jpg_b.jpg" alt="">
<h3><font color="#5F9EA0">我是第四台打印机</font></h3>
</a>
</li>
<li data-id="5">
<a href="#">
<img src="https://www.jb51.net/img/T2TIYaXc4aXXXXXXXX_!!684563508.png_b.jpg" alt="">
<h3><font color="#7FFF00">我是第五台打印机</font></h3>
</a>
</li>
<li data-id="6">
<a href="#">
<img src="https://www.jb51.net/img/T2uOlZXoRcXXXXXXXX_!!645750852.jpg_b.jpg" alt="">
<h3><font color="#D2691E">我是第六台打印机</font></h3>
</a>
</li>
<li data-id="7">
<a href="#">
<img src="https://www.jb51.net/img/T2WDSCXalcXXXXXXXX_!!409679289.jpg_b.jpg" alt="">
<h3><font color="#6495ED">我是第七台打印机</font></h3>
</a>
</li>
<li data-id="8">
<a href="#">
<img src="https://www.jb51.net/img/T2YOORXeXXXXXXXXXX_!!731577459.jpg_b.jpg" alt="">
<h3><font color="#00008B">我是第八台打印机</font></h3>
</a>
</li>
</ul>
</section>
<aside>
<div>
<div>
<div>
<span>名称</span>
<span>数量</span>
</div>
<ul>
</ul>
</div>
</div>
</aside>
</div>
<script>
$(function () {
// jQuery UI Draggable
$("#product li").draggable({
// brings the item back to its place when dragging is over
revert:true,
// once the dragging starts, we decrease the opactiy of other items
// Appending a class as we do that 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 will be appended to the to-be-dropped-element (basket)
activeClass:"active",
// The class that will 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 #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 the 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 is added to the basket
function addBasket(basket, move) {
basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
+ '<span>' + move.find("h3").html() + '</span>'
+ '<input value="1" type="text">'
+ '<button>✕</button>');
}
// The function that is triggered once delete button is pressed
$(".basket ul li button.delete").live("click", function () {
$(this).closest("li").remove();
});
});
</script>
</body>
</html>
jquery-ui-1.9.0.custom.min.js
main.css:
复制代码 代码如下: