拖拽购物车

原创 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>

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

这里面还集成计算总价,个人感觉蛮好的。         HTML 5 Drag and Drop Shopping Cart     ul, li{ list-style: none;...

Jquey购物车拖拽效果

  • 2011-12-22 17:09
  • 81KB
  • 下载

购物车--数据库+ajax

$(function() {  var prod_id = $("#prod_id").val();  var stock=$("#over_amount_"+prod_id).val();  ...

组件拖拽,购物车效果

  • 2015-09-29 16:57
  • 1.20MB
  • 下载

js拖拽购物车

  • 2016-10-12 10:50
  • 129KB
  • 下载

购物车

session_start(); //识别用户身份 //记录不同页面跳转后的商品情况 ?> 网上商品 //从tb_product_type表获取产品类别信息,显示到首...

拖拽购物车

一个php购物车的例子

网上搜到的,简单容易理解。cookie存购物车ID,db存购物车数据。 //购物车session的产生代码 if(! $session && ! $scid) { /* session用来区别每一个...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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