通过jQuery EasyUI实现基本的拖放,此为转发!!大家学习讨论

本教程(转自慧都控件网)将为你展示如何使HTML元素可拖动。在这个示例中我们将创建3个DIV元素,然后使它们能够被拖动。

查看演示

首先,我们创建3个div元素:


1

2

3

<div id="dd1" class="dd-demo"></div>

<div id="dd2" class="dd-demo"></div>

<div id="dd3" class="dd-demo"></div>

对于第一个div元素,我们可以通过默认设置使其可拖动。


1

$(‘#dd1‘).draggable();

对于第二个div元素,我们可以通过创建一个复制原始元素的代理使其可拖动。


1

2

3

$(‘#dd2‘).draggable({

proxy:‘clone‘

});

对于第三个div元素,我们可以通过创建一个自定义的代理使其可拖动。


1

2

3

4

5

6

7

$(‘#dd3‘).draggable({

proxy:function(source){

var p = $(‘<div class="proxy">proxy</div>‘);

p.appendTo(‘body‘);

return p;

}

});

时间: 2024-10-31 16:34:28

通过jQuery EasyUI实现基本的拖放,此为转发!!大家学习讨论的相关文章

第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使用方法,这个组件 依赖于 Combo(自定义下拉框)和 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <select id="box" class="easyui-combogrid" name="dept" sty

jQuery EasyUI使用教程之创建一个拖放的购物车

<jQuery EasyUI最新版下载> 如果你能利用你的web应用程序很容易地实现简单的拖放,那么你一定知道一些特别的东西,使用jQuery EasyUI,我们能在web应用程序中简单地实现拖放功能. 在本教程中,我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面.购物车中的物品和价格将会更新. 查看演示 在页面上显示商品: < ul class = "products" > < li > < a href = "

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

jQuery EasyUI 拖放 - 创建拖放的购物车 如果您能够通过您的 Web 应用简单地实现拖动和放置,您就会知道一些特别的东西.通过 jQuery EasyUI,我们在 Web 应用中可以简单地实现拖放功能. 在本教程中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面.购物篮中的物品和价格将更新. 显示页面上的商品 Balloon Price:$25 Feeling Price:$25 正如您所看到的上面的代码,我们添加一个包含一些 元素的 元素来显示商品.所有商

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

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

用户界面框架jQuery EasyUI示例大全之Tree

<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序. 基本树 本示例主要演示了jQuery EasyUI基本的树,在左边可点击展开或折叠节点的箭头.[另附源代码供大家参考] |在线Demo 动画树 本示例主要演示了jQuery EasyUI的动画树,将'animate'属性设置为true可

jQuery EasyUI 教程

jQuery EasyUI 是一个基于 jQuery的javascript框架,集成了各种用户界面插件.jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点.本教程将告诉您如何使用 jQuery EasyUI 框架创建应用.现在开始学习 jQuery EasyUI!jQuery EasyUI 离线版CHM下载! jQuery EasyUI 教程目录 jQuery EasyUI 教程jQuery EasyUI 简介 jEasyUI 应用jEasyUI 创建 CRUD 应用j

雷林鹏分享:jQuery EasyUI 扩展

jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editable Tree) 数据网格行过滤(DataGrid Filter Row) 数据网格行拖放(Drag and Drop Rows in DataGrid) 树形网格行拖放(Drag and Drop Rows in TreeGrid) 主题(Themes) DWR 加载器(DWR Loader) R

第二百零八节,jQuery EasyUI,SplitButton(分割按钮菜单)组件

jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用方法,这个组件依赖 于 Menu(菜单)组件和 LinkButton(按钮)组件. 注意:SplitButton(分割按钮)组件与,MenuButton(菜单按钮)是一样的,不同是(分割按钮)组件多了一个分隔符 一加载方式 class 加载方式 <a href="javascript:void

JQuery EasyUI的常用组件

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <