easyUI 拖动(Drag)和放置(Drop)Tree
2012-08-13 11:07
183 查看
@author YHC
当使用tree插件在一个应用,drag(拖拽) 和 drop(放置)功能是必须允许用户改变节点位置,启用drag
和 drop 操作,所有你需要做的就是为tree插件设置 'dnd'属性为true.
onDrop: function(targetNode, source, point){
var targetId = $(target).tree('getNode', targetNode).id;
$.ajax({
url: '...',
type: 'post',
dataType: 'json',
data: {
id: source.id,
targetId: targetId,
point: point
}
});
}
easyui-tree-demo.zip
当使用tree插件在一个应用,drag(拖拽) 和 drop(放置)功能是必须允许用户改变节点位置,启用drag
和 drop 操作,所有你需要做的就是为tree插件设置 'dnd'属性为true.
创建 Tree
$('#tt').tree({ dnd: true, url: 'tree_data.json' });当放置成功在一个tree节点, 'onDrop' 事件将被触发,你应该做一些或更多的操作,例如保存节点状态到远程服务器端,等等..
onDrop: function(targetNode, source, point){
var targetId = $(target).tree('getNode', targetNode).id;
$.ajax({
url: '...',
type: 'post',
dataType: 'json',
data: {
id: source.id,
targetId: targetId,
point: point
}
});
}
下载 EasyUI 示例代码:
easyui-tree-demo.zip
相关文章推荐
- ExtJS+ASP.NET实现Grid到Tree的拖动(DragDrop)
- ExtJS+ASP.NET实现Tree节点的拖动(DragDrop)
- web拖动Drag&Drop原理
- 图形化编程软件 sikuli dragDrop()函数使用拖动 滑动条slider 的一个 demo
- 文件拖动Drag & Drop 全解析
- easyui源码翻译1.32--Draggable(拖动)
- web拖动Drag&Drop原理
- EasyUI 基本的拖动和放置
- draganddrop图片拖动效果
- angular拖动插件——ng-drag、ng-drop
- web拖动Drag&Drop原理
- easyui-tree,拖动改变树结构,,
- easyui Draggable组件实现拖动效果
- EasyUI - Draggable 拖动控件
- 文件拖动Drag & Drop 全解析
- XHtmlTree - Tree control with support for HTML, XML, Smart Checkboxes, and Drag & Drop
- EasyUI的拖动及放置组件
- easyUI 基础的拖动和放置
- (搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)
- EasyUI介绍和拖动例子(draggable)