首页
所有分类
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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
Angularjs手动解析表达式（$parse）
Oct 12 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
微信小程序实现左滑动删除效果
Mar 30 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
DSP(2) 车机(1) TECSUN(1) PL-365(1) 德生(17) 海燕B411(1) 接收机(2) 电子管(5) 放大器(1) 修复(2)
You might like
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PDO::query讲解
2019/01/29 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python操作列表的常用方法分享
2014/02/13 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python 查看文件的读写权限方法
2018/01/23 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
python logging通过json文件配置的步骤
2020/04/27 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
Nike英国官网：Nike.com (UK)
2017/02/13 全球购物
欧洲顶级的童装奢侈品购物网站：Bambini Fashion（面向全球）
2018/04/24 全球购物
漫威玩具服装及周边商品官方购物网站：Marvel Shop
2019/05/11 全球购物
Araks官网：纽约内衣品牌
2020/10/15 全球购物
酒店周年庆活动方案
2014/08/21 职场文书
年终工作总结范文
2019/06/20 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Win11怎么修改电源模式？Win11修改电源模式的方法
2022/04/05 数码科技