首页
所有分类
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 相关文章推荐
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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
jenkins(1) 访问日志(2) UV(1) PV(1) 逆序(1) 线程(1) ipv6(1) 字符串(2) 连接数(1) 进程假死(1)
You might like
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
一分钟理解js闭包
2016/05/04 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
nodejs入门教程二：创建一个简单应用示例
2017/04/24 NodeJs
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python多继承顺序实例分析
2018/05/26 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python中pass的作用与使用教程
2020/11/13 Python
python如何构建mock接口服务
2021/01/28 Python
Python与C/C++的相互调用案例
2021/03/04 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
sealed修饰符是干什么的
2012/10/23 面试题
《挑山工》的教学反思
2014/02/16 职场文书
商务英语广告词大全
2014/03/18 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书