jquery實(shí)現(xiàn)商品拖動選擇效果代碼(自寫)
更新時(shí)間：2013年05月28日 17:18:03 作者：
商品拖動選擇效果如圖所示，感興趣的朋友已經(jīng)迫不及待想實(shí)現(xiàn)了吧，下面與大家分享下具體的實(shí)現(xiàn)思路及處理程序
效果圖如下：
主頁面index.html:
<!doctype html>
<html lang="en">
<head>
<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>
</head>
<body>
<div class="container">
<section id="product">
<ul class="clear">
<li data-id="1">
<a href="#">
<img src="img/T14CBxXaVzXXbGir7U_013755.jpg_160x160.jpg" alt="">
<h3><font color="#8A2BE2">我是第一臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="2">
<a href="#">
<img src="img/T2i06FXa4aXXXXXXXX_!!1128692172.jpg_b.jpg" alt="">
<h3><font color="#A52A2A">我是第二臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="3">
<a href="#">
<img src="img/T2odyUXf8bXXXXXXXX_!!629457645.jpg_b.jpg" alt="">
<h3><font color="#DEB887">我是第三臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="4">
<a href="#">
<img src="img/T2OgebXd8cXXXXXXXX_!!441091394.jpg_b.jpg" alt="">
<h3><font color="#5F9EA0">我是第四臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="5">
<a href="#">
<img src="img/T2TIYaXc4aXXXXXXXX_!!684563508.png_b.jpg" alt="">
<h3><font color="#7FFF00">我是第五臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="6">
<a href="#">
<img src="img/T2uOlZXoRcXXXXXXXX_!!645750852.jpg_b.jpg" alt="">
<h3><font color="#D2691E">我是第六臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="7">
<a href="#">
<img src="img/T2WDSCXalcXXXXXXXX_!!409679289.jpg_b.jpg" alt="">
<h3><font color="#6495ED">我是第七臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="8">
<a href="#">
<img src="img/T2YOORXeXXXXXXXXXX_!!731577459.jpg_b.jpg" alt="">
<h3><font color="#00008B">我是第八臺打印機(jī)</font></h3>
</a>
</li>
</ul>
</section>
<aside id="sidebar">
<div class="basket">
<div class="basket_list">
<div class="head">
<span class="name">名稱</span>
<span class="count">數(shù)量</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 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 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 class="name">' + move.find("h3").html() + '</span>'
+ '<input class="count" value="1" type="text">'
+ '<button class="delete">✕</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:
/* reset & .clear
----------------------------*/
* {
margin: 0;
padding: 0;
}
.clear:before,
.clear:after {
content: " ";
display: table;
}
.clear:after { clear: both }
.clear { *zoom: 1 }
/* MAIN
----------------------------*/
body {
font: normal 12px/1.3 arial, sans-serif;
background-color: #eee;
}
li { list-style: none }
a { text-decoration: none }
.container {
position: relative;
width: 920px;
margin: 30px auto;
}
.container #product {
position: relative;
z-index: 2;
float: left;
width: 670px;
}
.container #sidebar {
position: relative;
z-index: 1;
float: right;
width: 224px;
}
/* PRODUCTS
----------------------------*/
#product ul {
width: 680px;
margin-left: -10px; }
#product ul li {
position: relative;
float: left;
width: 150px;
margin: 0 0 10px 10px;
padding: 5px;
background-color: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease;
-moz-transition: -webkit-transform .1s ease;
-o-transition: -webkit-transform .1s ease;
-ms-transition: -webkit-transform .1s ease;
transition: transform .1s ease;
}
#product ul li:hover {
background-color: #fff8c1;
}
#product.active ul li {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity = 40);
opacity: .4;
}
#product.active ul li.active {
z-index: 2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity = 100);
opacity: 1;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(.6);
-moz-transform: scale(.6);
-o-transform: scale(.6);
-ms-transform: scale(.6);
transform: scale(.6);
}
#product ul li a {
display: block;
color: #000
}
#product ul li a h3 {
margin-top: 5px;
}
#product ul li a h3,
#product ul li a p {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#product ul li a img { width:150px;height:150px;display: block }
/* BASKET
----------------------------*/
.basket {
position: relative;
}
.basket .basket_list {
width: 220px;
background-color: #fff;
border: 2px dashed transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.basket.active .basket_list,
.basket.hover .basket_list { border-color: #ffa0a3 }
.basket.active .basket_list { background-color: #fff8c1 }
.basket.hover .basket_list { background-color: #ffa0a3 }
/* .head */
.basket .head {
overflow: hidden;
margin: 0 10px;
height: 26px;
line-height: 26px;
color: #666;
border-bottom: 1px solid #ddd;
}
.basket .head .name { float: left }
.basket .head .count { float: right }
/* .head */
.basket ul { padding-bottom: 10px }
.basket ul li {
position: relative;
clear: both;
overflow: hidden;
margin: 0 10px;
height: 26px;
line-height: 32px;
border-bottom: 1px dashed #eee;
}
.basket ul li:hover { border-bottom-color: #ccc }
.basket ul li span.name {
display: block;
float: left;
width: 165px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-transition: width .2s ease;
-moz-transition: width .2s ease;
-o-transition: width .2s ease;
-ms-transition: width .2s ease;
transition: width .2s ease;
}
.basket ul li:hover span.name { width: 146px }
.basket ul li input.count {
float: right;
margin: 3px 2px 0 0;
width: 25px;
line-height: 20px;
text-align: center;
border: 0;
border-radius: 3px;
background-color: #ddd;
}
.basket ul li button.delete {
position: absolute;
right: 30px;
top: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
opacity: 0;
width: 20px;
line-height: 20px;
height: 20px;
text-align: center;
font-size: 11px;
border: 0;
color: #EE5757;
background-color: #eee;
border-radius: 3px;
cursor: pointer;
-webkit-transition: opacity .2s ease;
-moz-transition: opacity .2s ease;
-o-transition: opacity .2s ease;
-ms-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.basket ul li:hover button.delete {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity = 100);
opacity: 1;
}
.basket ul li button.delete:hover {
color: #fff;
background-color: #ffa0a3;
}
.basket ul li button.delete:active {
color: #fff;
background-color: #EE5757;
}
主頁面index.html:
復(fù)制代碼 代碼如下:
<!doctype html>
<html lang="en">
<head>
<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>
</head>
<body>
<div class="container">
<section id="product">
<ul class="clear">
<li data-id="1">
<a href="#">
<img src="img/T14CBxXaVzXXbGir7U_013755.jpg_160x160.jpg" alt="">
<h3><font color="#8A2BE2">我是第一臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="2">
<a href="#">
<img src="img/T2i06FXa4aXXXXXXXX_!!1128692172.jpg_b.jpg" alt="">
<h3><font color="#A52A2A">我是第二臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="3">
<a href="#">
<img src="img/T2odyUXf8bXXXXXXXX_!!629457645.jpg_b.jpg" alt="">
<h3><font color="#DEB887">我是第三臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="4">
<a href="#">
<img src="img/T2OgebXd8cXXXXXXXX_!!441091394.jpg_b.jpg" alt="">
<h3><font color="#5F9EA0">我是第四臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="5">
<a href="#">
<img src="img/T2TIYaXc4aXXXXXXXX_!!684563508.png_b.jpg" alt="">
<h3><font color="#7FFF00">我是第五臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="6">
<a href="#">
<img src="img/T2uOlZXoRcXXXXXXXX_!!645750852.jpg_b.jpg" alt="">
<h3><font color="#D2691E">我是第六臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="7">
<a href="#">
<img src="img/T2WDSCXalcXXXXXXXX_!!409679289.jpg_b.jpg" alt="">
<h3><font color="#6495ED">我是第七臺打印機(jī)</font></h3>
</a>
</li>
<li data-id="8">
<a href="#">
<img src="img/T2YOORXeXXXXXXXXXX_!!731577459.jpg_b.jpg" alt="">
<h3><font color="#00008B">我是第八臺打印機(jī)</font></h3>
</a>
</li>
</ul>
</section>
<aside id="sidebar">
<div class="basket">
<div class="basket_list">
<div class="head">
<span class="name">名稱</span>
<span class="count">數(shù)量</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 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 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 class="name">' + move.find("h3").html() + '</span>'
+ '<input class="count" value="1" type="text">'
+ '<button class="delete">✕</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:
復(fù)制代碼 代碼如下:
/* reset & .clear
----------------------------*/
* {
margin: 0;
padding: 0;
}
.clear:before,
.clear:after {
content: " ";
display: table;
}
.clear:after { clear: both }
.clear { *zoom: 1 }
/* MAIN
----------------------------*/
body {
font: normal 12px/1.3 arial, sans-serif;
background-color: #eee;
}
li { list-style: none }
a { text-decoration: none }
.container {
position: relative;
width: 920px;
margin: 30px auto;
}
.container #product {
position: relative;
z-index: 2;
float: left;
width: 670px;
}
.container #sidebar {
position: relative;
z-index: 1;
float: right;
width: 224px;
}
/* PRODUCTS
----------------------------*/
#product ul {
width: 680px;
margin-left: -10px; }
#product ul li {
position: relative;
float: left;
width: 150px;
margin: 0 0 10px 10px;
padding: 5px;
background-color: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease;
-moz-transition: -webkit-transform .1s ease;
-o-transition: -webkit-transform .1s ease;
-ms-transition: -webkit-transform .1s ease;
transition: transform .1s ease;
}
#product ul li:hover {
background-color: #fff8c1;
}
#product.active ul li {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity = 40);
opacity: .4;
}
#product.active ul li.active {
z-index: 2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity = 100);
opacity: 1;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(.6);
-moz-transform: scale(.6);
-o-transform: scale(.6);
-ms-transform: scale(.6);
transform: scale(.6);
}
#product ul li a {
display: block;
color: #000
}
#product ul li a h3 {
margin-top: 5px;
}
#product ul li a h3,
#product ul li a p {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#product ul li a img { width:150px;height:150px;display: block }
/* BASKET
----------------------------*/
.basket {
position: relative;
}
.basket .basket_list {
width: 220px;
background-color: #fff;
border: 2px dashed transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.basket.active .basket_list,
.basket.hover .basket_list { border-color: #ffa0a3 }
.basket.active .basket_list { background-color: #fff8c1 }
.basket.hover .basket_list { background-color: #ffa0a3 }
/* .head */
.basket .head {
overflow: hidden;
margin: 0 10px;
height: 26px;
line-height: 26px;
color: #666;
border-bottom: 1px solid #ddd;
}
.basket .head .name { float: left }
.basket .head .count { float: right }
/* .head */
.basket ul { padding-bottom: 10px }
.basket ul li {
position: relative;
clear: both;
overflow: hidden;
margin: 0 10px;
height: 26px;
line-height: 32px;
border-bottom: 1px dashed #eee;
}
.basket ul li:hover { border-bottom-color: #ccc }
.basket ul li span.name {
display: block;
float: left;
width: 165px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-transition: width .2s ease;
-moz-transition: width .2s ease;
-o-transition: width .2s ease;
-ms-transition: width .2s ease;
transition: width .2s ease;
}
.basket ul li:hover span.name { width: 146px }
.basket ul li input.count {
float: right;
margin: 3px 2px 0 0;
width: 25px;
line-height: 20px;
text-align: center;
border: 0;
border-radius: 3px;
background-color: #ddd;
}
.basket ul li button.delete {
position: absolute;
right: 30px;
top: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
opacity: 0;
width: 20px;
line-height: 20px;
height: 20px;
text-align: center;
font-size: 11px;
border: 0;
color: #EE5757;
background-color: #eee;
border-radius: 3px;
cursor: pointer;
-webkit-transition: opacity .2s ease;
-moz-transition: opacity .2s ease;
-o-transition: opacity .2s ease;
-ms-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.basket ul li:hover button.delete {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity = 100);
opacity: 1;
}
.basket ul li button.delete:hover {
color: #fff;
background-color: #ffa0a3;
}
.basket ul li button.delete:active {
color: #fff;
background-color: #EE5757;
}
您可能感興趣的文章:
- python抓取京東價(jià)格分析京東商品價(jià)格走勢
- 類似天貓商品詳情隨瀏覽器移動的示例代碼
- python模擬登陸阿里媽媽生成商品推廣鏈接
- php版淘寶網(wǎng)查詢商品接口代碼示例
- jQuery 浮動導(dǎo)航菜單適合購物商品類型的網(wǎng)站
- PHP實(shí)現(xiàn)采集抓取淘寶網(wǎng)單個(gè)商品信息
- JQuery實(shí)現(xiàn)的購物車功能(可以減少或者添加商品并自動計(jì)算價(jià)格)
- 利用Python的Flask框架來構(gòu)建一個(gè)簡單的數(shù)字商品支付解決方案
- javascript實(shí)現(xiàn)點(diǎn)擊商品列表checkbox實(shí)時(shí)統(tǒng)計(jì)金額的方法
- php實(shí)現(xiàn)的簡單美國商品稅計(jì)算函數(shù)
- python根據(jù)京東商品url獲取產(chǎn)品價(jià)格
- php商品對比功能代碼分享
相關(guān)文章
本文結(jié)合圖文代碼，基本上將所有的jQuery選擇器都講解了一遍，非常的詳盡，希望對大家能有所幫助。2014-11-11
jquery 升級到1.4后 jqDrag 拖動 不可用的修改方法2010-02-02
在網(wǎng)上一直找不到j(luò)query上傳圖片的例子,今天由于工作需要,在網(wǎng)上找了很長時(shí)間,找到了一個(gè)不太完整的例子,自已又對其進(jìn)行了修改,現(xiàn)在已經(jīng)可以使用,但只限于IE,火狐下不能使用,因?yàn)榛鸷碌貌坏奖镜厣蟼鞯膱D片路徑,希望能對新手有所幫助.2010-01-01
這篇文章主要介紹了基于jQuery下拉選擇框插件支持單選多選功能代碼的相關(guān)資料,需要的朋友可以參考下2016-06-06
jquery uploadify隱藏上傳進(jìn)度的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query uploadify隱藏上傳進(jìn)度的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
用jQuery向div中添加Html文本內(nèi)容的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄胘Query向div中添加Html文本內(nèi)容的簡單實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了jQuery獲取單擊節(jié)點(diǎn)對象的方法,涉及jQuery操作鼠標(biāo)事件與頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jQuery+Ajax請求本地?cái)?shù)據(jù)加載商品列表頁并跳轉(zhuǎn)詳情頁的實(shí)現(xiàn)方法
本文通過實(shí)例代碼給大家介紹了jQuery+Ajax請求本地?cái)?shù)據(jù)加載商品列表頁并跳轉(zhuǎn)詳情頁,需要的朋友可以參考下2017-07-07
解析頁面加載與js函數(shù)的執(zhí)行 onload or ready
這篇文章主要介紹了頁面加載與js函數(shù)的執(zhí)行 onload or ready 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jQuery插件imgPreviewQs實(shí)現(xiàn)上傳圖片預(yù)覽
這篇文章主要介紹了jQuery插件imgPreviewQs實(shí)現(xiàn)上傳圖片預(yù)覽的相關(guān)資料,需要的朋友可以參考下2016-01-01