关闭

拖拽购物车

1377人阅读 评论(0) 收藏 举报

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

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:42649次
    • 积分:1067
    • 等级:
    • 排名:千里之外
    • 原创:72篇
    • 转载:0篇
    • 译文:0篇
    • 评论:5条