首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现商品拖动选择效果代码(自写)

Posted in Javascript onMay 28, 2013

效果图如下：
jquery实现商品拖动选择效果代码(自写) 
jquery实现商品拖动选择效果代码(自写)
主页面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">我是第一台打印机</font></h3> 
</a> 
</li> 
<li data-id="2"> 
<a href="#"> 
<img src="img/T2i06FXa4aXXXXXXXX_!!1128692172.jpg_b.jpg" alt=""> 
<h3><font color="#A52A2A">我是第二台打印机</font></h3> 
</a> 
</li> 
<li data-id="3"> 
<a href="#"> 
<img src="img/T2odyUXf8bXXXXXXXX_!!629457645.jpg_b.jpg" alt=""> 
<h3><font color="#DEB887">我是第三台打印机</font></h3> 
</a> 
</li> 
<li data-id="4"> 
<a href="#"> 
<img src="img/T2OgebXd8cXXXXXXXX_!!441091394.jpg_b.jpg" alt=""> 
<h3><font color="#5F9EA0">我是第四台打印机</font></h3> 
</a> 
</li> 
<li data-id="5"> 
<a href="#"> 
<img src="img/T2TIYaXc4aXXXXXXXX_!!684563508.png_b.jpg" alt=""> 
<h3><font color="#7FFF00">我是第五台打印机</font></h3> 
</a> 
</li> 
<li data-id="6"> 
<a href="#"> 
<img src="img/T2uOlZXoRcXXXXXXXX_!!645750852.jpg_b.jpg" alt=""> 
<h3><font color="#D2691E">我是第六台打印机</font></h3> 
</a> 
</li> 
<li data-id="7"> 
<a href="#"> 
<img src="img/T2WDSCXalcXXXXXXXX_!!409679289.jpg_b.jpg" alt=""> 
<h3><font color="#6495ED">我是第七台打印机</font></h3> 
</a> 
</li> 
<li data-id="8"> 
<a href="#"> 
<img src="img/T2YOORXeXXXXXXXXXX_!!731577459.jpg_b.jpg" alt=""> 
<h3><font color="#00008B">我是第八台打印机</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">数量</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; 
}

jquery实现商品拖动选择效果代码(自写)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
jQuery的ready方法详解
Nov 27 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
Vue 实现显示/隐藏层的思路（加全局点击事件）
Dec 31 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 #Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 #Javascript
jQuery实现可拖动的浮动层完整代码
May 27 #Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 #Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 #Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 #Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 #Javascript
canvas(2) 外键(1) IC-R9500(1) 代理(2) 选择器(1) 脏读(2) SQL注入(2) 克隆(1) 增删查改(1) #{}(1)
You might like
海贼王动画变成“真人”后，凯多神还原，雷利太帅了！
2020/04/09 日漫
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
PHP使用数组实现队列
2012/02/05 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
javascript基础知识之html5轮播图实例讲解（44）
2017/02/17 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
ES11新增的这9个新特性，你都掌握了吗
2020/10/15 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python的条件表达式和lambda表达式实例
2019/01/31 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
Python self用法详解
2020/11/28 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
DC Shoes俄罗斯官网：美国滑板鞋和服饰品牌
2020/08/19 全球购物
施工单位安全责任书
2014/07/24 职场文书
低碳环保演讲稿
2014/08/28 职场文书
员工团队活动方案
2014/08/28 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers