jquery拖拽购物车

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

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

相关文章推荐

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

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

Jquey购物车拖拽效果

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

jquery学习笔记-购物车表单简单实现

购物车主html代码:
  • mysuc
  • mysuc
  • 2014-07-15 14:47
  • 477

组件拖拽,购物车效果

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

jquery 仿天猫加入购物车

HTML 首先加载jQuery.js和jquery.fly.min.js插件。  src="jquery.js">    src="jquery.fly.min.js"> 接着,作4个商品进行演...

js拖拽购物车

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

拖拽购物车

利用jquery.fly实现仿淘宝购物车飞入特效

学习在于积累,今天利用jquery.fly实现仿淘宝购物车飞入特效,虽然实现起来简单,但实际使用时有一堆坑需要注意。结合实际项目经验,我简单的总结了一下到底有哪些坑需要去填。参考网址:github:h...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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