关闭

拖拽购物车

标签: functiondivxhtmlfloatserverjquery
116人阅读 评论(0) 收藏 举报
 

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

0
0

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