雷林鹏分享:jQuery EasyUI 拖放 - 创建拖放的购物车

  jQuery EasyUI 拖放 - 创建拖放的购物车

  如果您能够通过您的 Web 应用简单地实现拖动和放置,您就会知道一些特别的东西。通过 jQuery EasyUI,我们在 Web 应用中可以简单地实现拖放功能。

  在本教程中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面。购物篮中的物品和价格将更新。

  显示页面上的商品

  

  

    •   

        

        

        

      Balloon

        

      Price:$25

        

        

        

  

    •   

        

        

        

      Feeling

        

      Price:$25

        

        

        

  

  

  正如您所看到的上面的代码,我们添加一个包含一些

  • 元素的

        元素来显示商品。所有商品都有名字和价格属性,它们包含在

    元素中。

      创建购物车

      

      

    Shopping Cart

      

      

      

      

      

      

      

      

      

    Name Quantity Price

      

    Total: $0

      

    Drop here to add to cart

      

      我们使用数据网格(datagrid)来显示购物篮中的物品。

      拖动克隆的商品

      $(‘.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‘;

      }

      });

      请注意,我们把 draggable 属性的值从 ‘proxy‘ 设置为 ‘clone‘,所以拖动元素将由克隆产生。

      放置选择商品到购物车中

      $(‘.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]));

      }

      });

      var data = {"total":0,"rows":[]};

      var totalCost = 0;

      function addProduct(name,price){

      function add(){

      for(var i=0; i<data.total; p="" 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);

      }

      每当放置商品的时候,我们首先得到商品名称和价格,然后调用 ‘addProduct‘ 函数来更新购物篮。

      下载 jQuery EasyUI 实例

      jeasyui-dd-shopping.zip

      本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

原文地址:https://www.cnblogs.com/pengpeng1208/p/10861900.html

时间: 2024-10-10 07:39:23

雷林鹏分享:jQuery EasyUI 拖放 - 创建拖放的购物车的相关文章

雷林鹏分享jQuery EasyUI 布局 - 在面板中创建复杂布局

面板(Panel)允许您创建用于多种用途的自定义布局.在本实例中,我们使用面板(panel)和布局(layout)插件来创建一个 msn 消息框. 我们在区域面板中使用多个布局(layout).在消息框的顶部我们放置一个查询输入框,同时在右边放置一个人物图片.在中间的区域我们通过设置 split 属性为 true,把这部分切割为两部分,允许用户改变区域面板的尺寸大小. 以下就是所有代码: Search: Hi,I am easyui. 我们不需要写任何的 javascript 代码,它自己有非常

雷林鹏分享jQuery EasyUI 数据网格 - 动态改变列

数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用datagrid 方法,并传递一个新的 columns 属性. 创建数据网格(DataGrid) url="data/datagrid_data.json" singleSelect="true" iconCls="icon-save"> $('#tt').datagrid({ columns:[[ {

雷林鹏分享:PHP MySQL 创建数据库

数据库存有一个或多个表. 你需要 CREATE 权限来创建或删除 MySQL 数据库. 使用 MySQLi 和 PDO 创建 MySQL 数据库 CREATE DATABASE 语句用于在 MySQL 中创建数据库. 在下面的实例中,创建了一个名为 "myDB" 的数据库: 实例 (MySQLi - 面向对象) connect_error) { die("连接失败: " . $conn->connect_error); } // 创建数据库 $sql = &q

jQuery EasyUI 窗口 – 创建简单窗口

jQuery EasyUI 窗口 – 创建简单窗口 创建一个窗口(window)非常简单,我们创建一个 DIV 标记: <div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;"> Some Content. </div> 现在运行测试页面,您会看见一个窗口(win

雷林鹏分享:jQuery EasyUI 拖放 - 基本的拖动和放置

jQuery EasyUI 拖放 - 基本的拖动和放置 本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置. 首先,我们创建三个 元素: 对于第一个 元素,我们通过默认值让其可以拖动. $('#dd1').draggable(); 对于第二个 元素,我们通过创建一个克隆(clone)了原来元素的代理(proxy)让其可以拖动. $('#dd2').draggable({ proxy:'clone' }); 对于第三个 元素,我们通过创建自定

雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务器. 在本教程中,我们将要创建一个注册表单,带有 name.address.city 字段.city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市. 创建表单(Form) title="Register" butto

雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格

jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建一个可编辑属性的分层(hierarchical)列表. 设置 HTML url="propertygrid_data.json" showGroup="true" scrollbarSize="0" > 准备 json 数据 [ {"

雷林鹏分享:jQuery EasyUI 菜单与按钮 - 创建菜单按钮

jQuery EasyUI 菜单与按钮 - 创建菜单按钮(Menu Button) 菜单按钮(Menu Button)包含一个按钮(button)和一个菜单(menu)组件,当点击或移动鼠标到按钮上,将显示一个对应的菜单. 为了定义一个菜单按钮(Menu Button),您应该定义一个链接按钮(Link Button)和一个菜单(menu),下面是一个实例: Edit Help Undo Redo Cut Copy Paste Delete Select All Help Update Abou

雷林鹏分享:jQuery EasyUI 菜单与按钮 - 创建分割按钮

jQuery EasyUI 菜单与按钮 - 创建分割按钮(Split Button) 分割按钮(Split Button)包含一个链接按钮(Link Button)和一个菜单(Menu).当用户点击或者鼠标悬停在向下箭头区域,将会显示一个对应的菜单.本实例演示了如何创建和使用分割按钮(Split Button). 我们创建一个分割按钮(Split Button)和一个链接按钮(Link Button): Edit Undo Redo Cut Copy Paste Open Firefox Int