jQuery EasyUI使用教程之基本的拖放

2019独角兽企业重金招聘Python工程师标准>>>

<jQuery EasyUI最新版下载>

本教程将为你展示如何使HTML元素可拖动。在这个示例中我们将创建3个DIV元素，然后使它们能够被拖动。

查看演示

首先，我们创建3个div元素：

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

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

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

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

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

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

$( '#dd2' ).draggable({

proxy: 'clone'

});

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

$( '#dd3' ).draggable({

proxy: function (source){

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

p.appendTo( 'body' );

return p;

}

});

下载该EasyUI示例：easyui-dnd-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的文章！

转载于:https://my.oschina.net/u/2317468/blog/517900

jQuery EasyUI使用教程之基本的拖放相关推荐

jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...
jQuery EasyUI使用教程之创建展开行详细编辑表单的CRUD应用
2019独角兽企业重金招聘Python工程师标准>>> 当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息.此功 ...
jQuery EasyUI使用教程之创建可折叠面板
2019独角兽企业重金招聘Python工程师标准>>> <jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识.折叠面板包含了一 ...
jQuery EasyUI使用教程之创建标签页
2019独角兽企业重金招聘Python工程师标准>>> <jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件.标签可以动态地添加或删 ...
jQuery EasyUI使用教程之在数据网格中添加搜索功能
2019独角兽企业重金招聘Python工程师标准>>> <jQuery EasyUI最新版下载> 在本教程中,我们将向你展示如何从数据库中获取数据,并将其显示到数据网格中 ...
雷林鹏分享：jQuery EasyUI 拖放 - 基本的拖动和放置
jQuery EasyUI 拖放 - 基本的拖动和放置本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置. 首先,我们创建三个元素: 对于第 ...
java提示框easyui风格_[Java教程]jQuery EasyUI 提示框(Messager)用法
[Java教程]jQuery EasyUI 提示框(Messager)用法 0 2013-10-10 19:00:06 jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的 ...
html怎么设置数据条的颜色,jQuery EasyUI 数据网格 – 条件设置行背景颜色 | 菜鸟教程...
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
php jq 提交表单验证,jQuery EasyUI 表单 – 表单验证 | 菜鸟教程
jQuery EasyUI 表单 - 表单验证本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...

jQuery EasyUI使用教程之基本的拖放

jQuery EasyUI使用教程之基本的拖放相关推荐

最新文章

热门文章