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;
}

赞 (0)

相关推荐

  • jQuery 浮动导航菜单适合购物商品类型的网站

    jQuery 浮动导航菜单适合购物商品类型的网站

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单通过锚点实现: 2.滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了: 计算 scrollTop 和 各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式.比如第二个 div 的 off

  • 利用Python的Flask框架来构建一个简单的数字商品支付解决方案

    利用Python的Flask框架来构建一个简单的数字商品支付解决方案

    作为一个程序员,我有时候忘了自己所具有的能力.当事情没有按照你想要的方式发展时,却很容易忘记你有能力去改变它.昨天,我意识到,我已经对我所出售的书的付款处理方式感到忍无可忍了.我的书完成后,我使用了三个不同的数字商品支付处理器,在对它们三个都感到不满后,我用Python和Flask,两个小时的时间写出了我自己的解决方案.没错!两个小时!现在,这个系统支撑着我的书籍付费流程,整个过程难以置信的简单,你可以在20秒内购买书籍并开始阅读. 往下看,看我是如何在一夜之间完成我自己的数字商品支付解决方案的

  • javascript实现点击商品列表checkbox实时统计金额的方法

    本文实例讲述了javascript实现点击商品列表checkbox实时统计金额的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • 类似天猫商品详情随浏览器移动的示例代码

    使用该函数,必须集成于jquery包 原理:当浏览器移动到某个指定位置时,该图层上浮,然后加入一个样式,让该div层定位于浏览器顶部 复制代码 代码如下: //控制头部购物车的显示 function fixshow(min_height){ min_height ? min_height = min_height : min_height = 830; $(window).scroll(function(){ var s = $(window).scrollTop(); if( s > min_

  • php实现的简单美国商品税计算函数

    本文实例讲述了php实现的简单美国商品税计算函数.分享给大家供大家参考.具体如下: <?php function tax($total,$tax_amount){ $tax_rate = $tax_amount * .01; $tax = $total * $tax_rate; return $value = $tax + $total; } $price = 50.00; //In U.S. Dollars $taxrate = 6.5; //In percentage echo "$&

  • php版淘宝网查询商品接口代码示例

    本文来给大家介绍一个php版淘宝网查询商品接口代码的例子,下面要改成你的信息的在代码后面都有说明了,同时sdk包我们也要官方下载. 下载SDK后直接引用包,并创建如下的类,并运行之,即完成了调用接口(taobao.user.seller.get)的过程(调用接口说明可见下载的SDK)说明:    TopClient为调用SDK的实例化类    UserSellerGetRequest为API的请求参数封装类 注:该接口是在沙箱环境下调用,获取的数据,也是沙箱中数据.若要获取线上环境,请填写自己创

  • JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)

    购物车点击可以减少或者添加商品并自动计算价格: 购物车中可能有这样的功能,那就是点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格,下面就通过代码实例介绍一下如何实现此功能,当然下面的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

  • php商品对比功能代码分享

    php商品对比功能代码分享

    下面是自己亲自动手编写的代码,和大家一起学习研究. 商品对比调用的JS文件(包含了商品对比框浮动JS): /*浮动窗口*/ (function(){ var n=10; var obj=document.getElementById("goods-compare"); if(!obj){ return false; } var x=0; window.onscroll=function(){ obj.style.top=(document.body.scrollTop||documen

  • python根据京东商品url获取产品价格

    京东商品详细的请求处理,是先显示html,然后再ajax请求处理显示价格. 1.可以运行js,并解析之后得到的html 2.模拟js请求,得到价格 # -*- coding: utf-8 -*- """ 根据京东url地址,获取商品价格 京东请求处理过程,先显示html页面,然后通过ajax get请求获取相应的商品价格 1.商品的具体数据在html中的格式,如下(示例) # product: { # skuid: 1310118868, # name: '\u9999\u5

  • python抓取京东价格分析京东商品价格走势

    复制代码 代码如下: from creepy import Crawlerfrom BeautifulSoup import BeautifulSoupimport urllib2import json class MyCrawler(Crawler):    def process_document(self, doc):        if doc.status == 200:            print '[%d] %s' % (doc.status, doc.url)       

  • python模拟登陆阿里妈妈生成商品推广链接

    淘宝官方有获取商品推广链接的API,但该API属于增值API 普通开发者没有调用权限 需要申请开通 备注:登陆采用的是阿里妈妈账号登陆非淘宝账号登陆 复制代码 代码如下: #coding:utf-8__author__ = 'liukoo'import urllib,urllib2,cookielib,refrom hashlib import md5class alimama:    def __init__(self):        self.header = {'User-Agent':

  • PHP实现采集抓取淘宝网单个商品信息

    调用淘宝的数据可以使用淘宝提供的api,如果只需调用淘宝商品图片名称等公开信息在自己网站上,使用php中的 file_get_contents 函数实现即可. 思路: file_get_contents(url) 该函数根据 url 如 http://www.baidu.com 将该网页内容(源码)以字符串形式输出(一个整字符串),然后配合preg_match,preg_replace等这些正则表达式操作就可以实现获取该url特定div,img等信息了.当然前题是淘宝在单个商品页面的结构是固定的

随机推荐