首页
所有分类
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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
js form表单input框限制20个字符，10个汉字代码实例
Apr 12 Javascript
深入理解Antd-Select组件的用法
Feb 25 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
harbor(1) 内置函数(1) Tablespace(1) Navicat(1) 记事本(1) 自定义函数(1) procedure(1) commit(1) V Rising(1) maven(2)
You might like
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
javascript根据像素点取位置示例
2014/01/27 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
javascript中return，return true,return false三者的用法及区别
2015/11/17 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
Python中自定义函数的教程
2015/04/27 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Python实现两个list求交集，并集，差集的方法示例
2018/08/02 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python中数据库like模糊查询方式
2020/03/02 Python
python 串行执行和并行执行实例
2020/04/30 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
Python进行特征提取的示例代码
2020/10/15 Python
python 利用toapi库自动生成api
2020/10/19 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
拉斯维加斯城市观光通行证：Las Vegas Pass
2019/05/21 全球购物
戴尔英国翻新电脑和电子产品：Dell UK Refurbished Computers
2019/07/30 全球购物
2014年政教处工作总结
2014/12/20 职场文书
公司档案管理制度
2015/08/05 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
Python实现Hash算法
2022/03/18 Python