`
stworthy
  • 浏览: 526105 次
  • 来自: ...
社区版块
存档分类
最新评论

jquery-easyui的拖放购物车范例

阅读更多

利用easyui的拖放能力可以轻松创建购物车,看一个例子:

 

1、显示产品HTML

<ul class="products">
    <li>
        <a href="#" class="item">
            <img src="shirt1.gif"/>
            <div>
                <p>Balloon</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="item">
            <img src="shirt2.gif"/>
            <div>
                <p>Feeling</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    <!-- other products -->
</ul>

2、购物车HTML:

<div class="cart">
    <h1>Shopping Cart</h1>
    <table id="cartcontent" style="width:300px;height:auto;">
        <thead>
            <tr>
                <th field="name" width=140>Name</th>
                <th field="quantity" width=60 align="right">Quantity</th>
                <th field="price" width=60 align="right">Price</th>
            </tr>
        </thead>
    </table>
    <p class="total">Total: $0</p>
    <h2>Drop here to add to cart</h2>
</div>

3、编写拖放代码:

$('.item').draggable({
    revert:true,
    proxy:'clone',
    onStartDrag:function(){
        $(this).draggable('options').cursor = 'not-allowed';
        $(this).draggable('proxy').css('z-index',10);
    },
    onStopDrag:function(){
        $(this).draggable('options').cursor='move';
    }
});
 
$('.cart').droppable({
    onDragEnter:function(e,source){
        $(source).draggable('options').cursor='auto';
    },
    onDragLeave:function(e,source){
        $(source).draggable('options').cursor='not-allowed';
    },
    onDrop:function(e,source){
        var name = $(source).find('p:eq(0)').html();
        var price = $(source).find('p:eq(1)').html();
        addProduct(name, parseFloat(price.split('$')[1]));
    }
});

4、更新购物篮代码:

var data = {"total":0,"rows":[]};
var totalCost = 0;
function addProduct(name,price){
    function add(){
        for(var i=0; i<data.total; i++){
            var row = data.rows[i];
            if (row.name == name){
                row.quantity += 1;
                return;
            }
        }
        data.total += 1;
        data.rows.push({
            name:name,
            quantity:1,
            price:price
        });
    }
    add();
    totalCost += price;
    $('#cartcontent').datagrid('loadData', data);
    $('div.cart .total').html('Total: $'+totalCost);
}

 

原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:dnd2

分享到:
评论
1 楼 liagliang 2013-05-07  
你实现了吗,我怎么总是出错呀

相关推荐

    jquery-easyui.zip_easyui框架_html 框架_jquery-easyui

    EasyUI 是一个基于 jQuery 的轻量级前端框架,它为开发者提供了一系列的组件和插件,使得构建交互式用户界面变得更加便捷。这个压缩包“jquery-easyui.zip”包含了使用 EasyUI 实现的一个HTML框架,它主要用于简化...

    jquery-easyui-themes.rar_easyui 主题_easyui主题_html_jquery_jquery-e

    在本文中,我们将详细探讨jQuery EasyUI的主题,特别是"jquery-easyui-themes.rar"这个压缩包中包含的主题资源,以及如何将这些主题应用到项目中。 该压缩包包含了"metro"系列的五套主题和"ui"系列的四套主题,具体...

    jquery-easyui-1.7.0.zip官方文档

    《jQuery EasyUI 1.7.0:打造高效前端界面的利器》 jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它为开发者提供了一系列组件,使得构建交互式、响应式的Web应用程序变得更加简单。在1.7.0版本中,这个强大的...

    jquery-easyui-1.2.2 jquery-easyui-1.2.2

    jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2

    jquery-easyui-1.3.3

    《jQuery EasyUI 1.3.3:轻松构建高效用户界面》 jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的组件和便捷的API,帮助开发者快速构建出功能完善、用户界面友好的Web应用程序。在版本1.3.3中,EasyUI...

    jquery-easyui-1.3.5

    这个`jquery-easyui-1.3.5`版本是该框架的一个特定发行版,下面将详细介绍这个版本包含的知识点。 首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery EasyUI...

    jquery-easyui-1.2.6

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI...jQuery-Easyui-1.2.6中含有jQuery库、easyui库、demo实例和jquery_easyui_中文帮助文档等。

    Jquery-Easyui-1.2.3

    标题中的 "Jquery-Easyui-1.2.3" 指的是该框架的特定版本,1.2.3版,这是其在某个时间点的稳定版本,包含了当时已知的所有功能和优化。 EasyUI 的核心理念是简化前端开发工作,通过预定义的CSS样式和JavaScript插件...

    jquery-easyui-1.5.5

    该资源为jquery-easyui-1.5.5版本,包含easyui插件所依赖的js和css

    jquery-easyui-1.5完整源码.zip

    在"jquery-easyui-1.5完整源码.zip"这个压缩包中,包含了EasyUI 1.5版本的完整源代码,这对于我们深入理解其工作原理、定制功能或优化性能具有极大的帮助。 首先,我们关注的是"src"文件夹。这个文件夹中的内容是...

    jquery-easyui-themes

    jquery-easyui-themes,easyui主题包,包含metro-blue metro-gray metro-green metro-orange metro-red ui-cupertino ui-dark-hive ui-pepper-grinder ui-sunny这些主题,具体的php使用方式见:...

    jquery-easyui完整demo演示

    在提供的“jquery-easyui-1.2.4”压缩包中,包含了大量的实际示例,覆盖了 EasyUI 的所有主要组件和功能。通过这些示例,开发者可以直观地了解每个组件的用法和配置,学习如何在实际项目中应用。 总的来说,jQuery...

    jquery-easyui-EDT-1.4-build1-附带各种主题

    在这款名为 "jquery-easyui-EDT-1.4-build1-附带各种主题" 的压缩包中,我们不仅获得了 jQuery EasyUI 的核心库,还得到了一套丰富多样的主题资源,这将为我们的网页设计带来极大的灵活性和视觉吸引力。 1. **...

    jquery-easyui-1.5.5.zip

    easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui...

    超实用的jQuery-EasyUI视频教程(30集)

    教程名称:超实用的jQuery-EasyUI视频教程(30集)课程目录:【】jQuery-EasyUI视频教程(01-02集)【】jQuery-EasyUI视频教程(03-04集)【】jQuery-EasyUI视频教程(05-06集)【】jQuery-EasyUI视频教程(07-08集...

    jquery-easyui-EDT-1.5.5.rar

    而“jquery-easyui-EDT-1.5.5.rar”则是一个包含jQuery EasyUI扩展、PC及移动设备演示以及插件的压缩包,旨在为开发者提供全方位的开发支持。 首先,我们要理解jQuery EasyUI的核心概念。EasyUI是由一系列预先定义...

    jquery-easyui-1.3.2 demo

    本篇文章将详细探讨 "jquery-easyui-1.3.2 demo",即官方提供的示例,帮助读者理解并掌握这一强大工具的使用方法。 EasyUI 的核心在于其组件库,这些组件包括数据网格(datagrid)、下拉树(combotree)、日期选择...

    jquery-easyui-1.3.2+API

    该文件中含有jquery-easyui 开发使用实例demo 及 jquery.easyui.min.js、jquery-1.8.0.min.js文件 ,以及EasyUI-1.3.2+中文版API,个人觉得在WEB开发的时候挺实用的,希望能方便大家

    jQuery EasyUI jquery-easyui-1.5.5.6

    这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本,这是一份重要的更新,可能包含了一些性能优化和新功能。 在该压缩包中,有几个关键文件和目录: 1. `jquery.easyui.min.js`:这是jQuery EasyUI的...

    jquery-easyui-portal.zi

    "jquery-easyui-portal.zi"这个压缩包文件显然包含了与jQuery EasyUI相关的资源,特别是针对门户(portal)的实现。门户框架是构建企业级应用的重要组成部分,它可以整合多个功能模块,提供个性化的工作空间,便于用户...

Global site tag (gtag.js) - Google Analytics