拖拽购物车

原创 2012年03月21日 21:44:46

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="js/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 src="js/jquery.ui.sortable.js" type="text/javascript"></script>

    <script src="js/jquery.ui.accordion.js" type="text/javascript"></script>

    <style type="text/css">

        body{font-size: 30px;}

        #left{width: 300px;height: 400px;float: left;border: 1px solid #666;}

        #logo1{width: 300px;height: 30px;float: left;background-color: #ccc;}

        #right{width: 300px;height: 270px;float: left;border: 1px solid #666;margin-left: 50px;}

        #logo2{ width: 300px;height: 30px;float: left;background-color: #ccc;}

        #content{width: 250px;height: 200px;float: left;border: 1px solid #ccc;margin-left: 25px;margin-top: 20px;}

        ul{font-size: 12px;margin: 0px;}

        ul li

        {list-style-type: none;font-size: 12px;}

        a{font-size: 12px;}

        .hoverclass{width: 250px;height: 200px;border: solid 1px #ccc;background-color: Lime;}

    </style>

    <script type="text/javascript">

        $(function () {

            $('#products').accordion();

            $('#products li').draggable({

                helper: "clone"

            });

            $('#content').droppable({

                activeClass: 'hoverclass',

                drop: function (event, ui) {

                    $(this).find(".placeholder").remove();

                    $("<li></li>").text(ui.draggable.text()).appendTo(this);

                }

            })

        })

    </script>

</head>

<body>

    <div id="left">

        <div id="logo1">

            <b>商¦¨¬品¡¤展1示º?</b></div>

        <div id="products">

            <h3>

                <a href="#">女?士º?服¤t装Á¡ã</a></h3>

            <div>

                <ul>

                    <li>连¢?衣°?裙¨1</li>

                    <li>针?织¡¥毛?衣°?</li>

                    <li>休Y闲D裤?</li>

                </ul>

            </div>

            <h3>

                <a href="#">鞋?包㨹配?饰º?</a></h3>

            <div>

                <ul>

                    <li>项?链¢¡ä</li>

                    <li>戒?指?</li>

                    <li>手º?链¢¡ä</li>

                </ul>

            </div>

            <h3>

                <a href="#">美¨¤容¨Y美¨¤妆Á¡À</a></h3>

            <div>

                <ul>

                    <li>爽?肤¤?水?</li>

                    <li>睫T毛?膏¨¤</li>

                    <li>眼?线?夜°1</li>

                </ul>

            </div>

        </div>

    </div>

    <div id="right">

        <div id="logo2">

            <b>购o物?车¦Ì</b></div>

        <div id="content" style="font-size:12px;">

        </div>

    </div>

</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
  • 900

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

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

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

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

用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
  • 630

Vue2.0实现购物车示例

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

JSP+javabean实现购物车功能

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

yii2购物车实现

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

购物车3种实现方式 详解

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

使用Servlet实现购物车效果

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

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