拖拽购物车

原创 2012年03月21日 20:22: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>

js拖拽购物车

案例如下 使用拖放API将商品拖入购物车 body { font-size:12px } .liT{ border-bottom:solid 1px #ccc; background-c...
  • sinat_25926481
  • sinat_25926481
  • 2016年10月12日 10:53
  • 890

HTML5 拖拽以及实现拖拽异步上传文件

HTML5拖拽 和 拖拽异步上传文件 一、传统实现拖拽的方式 传统的就是使用js实现元素的拖拽,核心原理如下: #box{    width:100px;    height:100px;  ...
  • sunfeizhi
  • sunfeizhi
  • 2015年08月09日 21:15
  • 3463

android可拖动的购物车效果(含点击放入购物车动画代码)

由于项目需要,做了一个可以移动的购物车控件,已经点击添加到购物车的动画效果.动画效果在列表中也是可以使用的 一.可以拖动的购物车 1.主要是通过WindowManager添加和删除自定义的LiearL...
  • qq94035441
  • qq94035441
  • 2016年01月06日 16:52
  • 939

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

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

H5拖拽应用——简单购物车

无标题文档 *{margin:0;padding:0;} li{list-style:none; float:left; width:200px; border:1px #000 solid;...
  • u011313703
  • u011313703
  • 2016年09月21日 11:05
  • 617

Vue2.0实现购物车示例

简介vue.js是由华人尤雨溪开发的一套MVVM框架。vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于交互处理非常多(如表单操作),而且页面中的内...
  • ParanoidYang
  • ParanoidYang
  • 2017年06月05日 11:29
  • 3256

JSP+javabean实现购物车功能

简单的小程序,java后台 + Web前端,可以实现购物车的添加,删除等功能,并没有用到数据库。而是用到的session存取功能。                                   ...
  • qq_28306215
  • qq_28306215
  • 2016年12月05日 20:24
  • 4991

yii2购物车实现

本人小菜鸟一只,为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,服务器)等一系列的知识,小菜鸟创建了一个群。希望光临本博客的人可以进来交流。寻求共同发展...
  • yafei450225664
  • yafei450225664
  • 2014年11月25日 12:02
  • 3260

购物车3种实现方式 详解

购物车相当于现实中超市的购物车,不同的是一个是实体车,一个是虚拟车而已。用户可以在购物网站的不同页面之间跳转,以选购自己喜爱的商品,点击购买时,该商品就自动保存到你的购物车中,重复选购后,最后将选中的...
  • y_dzaichirou
  • y_dzaichirou
  • 2016年12月22日 15:41
  • 2488

使用Servlet实现购物车效果

使用Servlet实现购物车效果
  • sinat_25295611
  • sinat_25295611
  • 2016年08月17日 09:27
  • 2630
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:拖拽购物车
举报原因:
原因补充:

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