jquery拖拽购物车

原创 2012年03月21日 20:19:16
 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div{width:70%;float:left;}
    p{background-color:#FFF0AC;width:100%;height:30px;font-weight:600;color:Red;}
    ul{display:none;}
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="js/jquery.ui.droppable.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("p").bind("mouseenter", function () {
                $("ul").css("display", "none");
                var id = $(this).attr("title");
                $("#" + id).css("display", "block");
            });

            $('li').draggable();
            $('#shop').droppable({
                over: function () {
                    $('#shop').css('background-color', 'green');
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="shop" style="float:right;width:300px;height:200px;background-color:#E6CAFF">
    <span style="font-weight:600; font-size:large;color:Red;">购物车</span>
    </div>
    <div id="dfirst">
    <p title="first">first</p>
    <ul id="first">
    <li>飞机</li>
    <li>火车</li>
    <li>大炮</li>
    <li>火箭</li>
    </ul>
    </div>
    <div id="dsecond">
    <p title="second">second</p>
    <ul id="second">
    <li>保定</li>
    <li>北京</li>
    <li>上海</li>
    </ul>
    </div>
    <div id="dthird">
    <p title="third">third</p>
    <ul id="third">
    <li>大平阳</li>
    <li>大西洋</li>
    </ul>
    </div>
    <div id="dfourth">
    <p title="fourth">fourth</p>
    <ul id="fourth">
    <li>时间碾碎记忆</li>
    <li>不在思念水水</li>
    </ul>
    </div>

    </form>
</body>
</html>

Jquery仿美团外卖等食品选择页面购物车数量加减功能实现

先上图: HTML部分:  营养套餐 酒水饮料 酒水饮料 酒水饮料 ...
  • zx_001
  • zx_001
  • 2017年06月07日 09:32
  • 2041

利用jQuery实现购物车功能

购物车----jQuery h1 { text-align:center; } table { margin:0...
  • wangqing84411433
  • wangqing84411433
  • 2017年04月27日 16:52
  • 6813

jQuery实现购物车功能

我写的这篇文章呢,主要功能就是可以减少或者添加商品数量,并且自动计算商品总价格,我是后台程序员,前台的知识就相对弱一些,所以我就记录下来这些前台知识,也希望这篇文章可以帮助到大家。 ...
  • wyl1401672169
  • wyl1401672169
  • 2016年09月18日 14:14
  • 2157

JQuery 购物车(商品可拖拽到购物车)

  • 2010年07月16日 15:53
  • 64KB
  • 下载

用html5实现的购物车拖拽特效

这里面还集成计算总价,个人感觉蛮好的。         HTML 5 Drag and Drop Shopping Cart     ul, li{ list-style: none;...
  • asdfzjs
  • asdfzjs
  • 2013年09月15日 15:41
  • 884

flex3一个简单购物车拖拽的例子

  • 2008年10月23日 10:14
  • 1.3MB
  • 下载

Jquey购物车拖拽效果

  • 2011年12月22日 17:09
  • 81KB
  • 下载

组件拖拽,购物车效果

  • 2015年09月29日 16:57
  • 1.2MB
  • 下载

js拖拽购物车

  • 2016年10月12日 10:50
  • 129KB
  • 下载

拖拽购物车

  • 2012年08月05日 20:44
  • 6KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery拖拽购物车
举报原因:
原因补充:

(最多只允许输入30个字)