四两拨千斤——Dijit Tree 拖拽（DnD, Drag & Drop）的精细控制

最新推荐文章于 2018-04-25 13:26:33 发布

慢游

最新推荐文章于 2018-04-25 13:26:33 发布

阅读量4.7k

点赞数

分类专栏： Dojo

本文链接：https://blog.csdn.net/eengel/article/details/12995229

版权

本文详细介绍了如何使用dijit.Tree控件实现Dojo中的拖拽（DnD）功能，特别是在拖动和放置节点时进行精细控制。内容包括禁止拖动特定节点、设定拖拽目标位置、改变节点属性、处理节点颜色变化、拖拽父节点及其孩子、滚动控制等。通过自定义TreeDndSource和TreeDndTarget，实现了拖拽过程中的各种定制需求。

摘要由CSDN通过智能技术生成

介绍

dijit.Tree是一款很有用的Dojo控件，用来在页面上表示树形数据。像Dojo其他很多控件一样，它可以直接和后台的数据连接，并实时显示在页面上。已经有很多帖子介绍如何创建树、加入点击事件及右键菜单等，这儿专门介绍dijit.Tree拖拽的精细控制（Dojo 1.7.3）。

先说说举例用的应用场景。一个食品原材料供应商要建立自己的产品列表（New List），该列表包含几个大类，大类下面又有小类，直至具体的产品。现在要做的就是，请一个专业人员，根据一个别的渠道来的列表（Old List），建立自己的产品列表。

根据需求，这两个列表(dijit.tree)要实现的最重要的功能就是支持拖拽（Drag & drop）：从左边的列表拖动节点到右边的列表。为了达到目标，还需要进行诸多精细控制，列举如下：

1. 在dijit.Tree上拖拽节点

在左边的树上，禁止拖动根节点、已经被拖拽到右边的节点；
设定拖拽的目标位置；
改变拖拽后的节点属性，比如这两棵树都是以”id”作为标识符，则拖拽后要保证节点的id和原来树上的节点但不冲突；
将拖拽后原来节点的颜色变成灰色，表示已经从这棵树上删除；
当选中的是父亲节点时，同时拖拽其孩子；
拖拽后，只在目标树上保留不是灰色的节点；
禁止拖拽节点到某个目标位置。

2. 滚动（Scrolling）

禁止有垂直滚动条时，用鼠标点滚动条触发拖拽。

要实现上面这么多控制，首先要了解dijit.Tree拖拽的主要控制部件。那就是"dijit/tree/dndSource"。它实现了很多接口，在拖拽生命周期的不同阶段产生相应的作用。这儿就通过继承和修改相应接口，实现我们要的功能。

创建两棵树

test_tree.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import "../js/dijit/themes/tundra/tundra.css";
@import "../css/main.css";
</style>

</head>
<body class="tundra">
<div style="width: 100%; height: 100%"
	data-dojo-type="dijit.layout.BorderContainer"
	data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true">
	<div data-dojo-type="dojox.layout.ContentPane" data-dojo-props="region:'left',splitter:true" style=&#

最低0.47元/天解锁文章

慢游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
四两拨千斤——Dijit Tree 拖拽（DnD, Drag & Drop）的精细控制

介绍dijit.Tree是一款很有用的Dojo控件，用来在页面上表示树形数据。像Dojo其他很多控件一样，它可以直接和后台的数据连接，并实时显示在页面上。已经有很多帖子介绍如何创建树、加入点击事件及右键菜单等，这儿专门介绍dijit.Tree拖拽的精细控制。先说说举例用的应用场景。一个食品原材料供应商要建立自己的产品列表（New List），该列表包含几个大类，大类下面又有小类，直至
复制链接

扫一扫

专栏目录