拖拽购物车

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

相关文章推荐

Jquey购物车拖拽效果

  • 2011年12月22日 17:09
  • 81KB
  • 下载

flex3一个简单购物车拖拽的例子

  • 2008年10月23日 10:14
  • 1.3MB
  • 下载

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

这里面还集成计算总价,个人感觉蛮好的。         HTML 5 Drag and Drop Shopping Cart     ul, li{ list-style: none;...
  • asdfzjs
  • asdfzjs
  • 2013年09月15日 15:41
  • 854

组件拖拽,购物车效果

  • 2015年09月29日 16:57
  • 1.2MB
  • 下载

js拖拽购物车

  • 2016年10月12日 10:50
  • 129KB
  • 下载

android 仿饿了么购物车

from : http://blog.csdn.net/jdsjlzx/article/details/47311749 这次分享的是一个很常见的效果,凡是涉及到购物的app或者旅游...

拖拽购物车

  • 2012年08月05日 20:44
  • 6KB
  • 下载

Jquery购物车抛物线效果

Jquery购物车抛物线效果。让你的小图片满屏飞。效果炫酷。实现动态加入购物车效果。购物车列表...

ecshop购物车页面使用ajax更新商品数量、小计、总价,点击加号和减号

第一步 购物车页面flow.dwt的商品列表部分的代码贴出来,这样比较起来方便一点...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:拖拽购物车
举报原因:
原因补充:

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