首页
所有分类
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 相关文章推荐
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
简单了解JS打开url的方法
Feb 21 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
泰国购物网站(30) 欧洲购物网站(15) 波兰购物网站(52) 阿联酋购物网站(26) 葡萄牙购物网站(13) 土耳其购物网站(10) 奥地利购物网站(28) 荷兰购物网站(99) 斯洛伐克购物网站(7) 哥伦比亚购物网站(5)
You might like
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python制作Windows系统服务
2017/03/25 Python
python实现Zabbix-API监控
2018/09/17 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
三个python爬虫项目实例代码
2019/12/28 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
会计专业应届生求职信
2013/11/24 职场文书
大学军训感言600字
2014/02/25 职场文书
学生会主席竞聘书
2014/03/31 职场文书
日语系毕业求职信
2014/07/27 职场文书
保安2014年终工作总结
2014/12/06 职场文书
干部年终考核评语
2015/01/04 职场文书
区域经理岗位职责
2015/02/02 职场文书
校长新学期寄语2016
2015/12/04 职场文书
导游词之无锡梅园
2019/11/28 职场文书
django 认证类配置实现
2021/11/11 Python