介绍
dijit.Tree是一款很有用的Dojo控件，用来在页面上表示树形数据。像Dojo其他很多控件一样，，它可以直接和后台的数据连接，并实时显示在页面上。已经有很多帖子介绍如何创建树、加入点击事件及右键菜单等，这儿专门介绍dijit.Tree拖拽的精细控制（Dojo 1.7.3）。
先说说举例用的应用场景。一个食品原材料供应商要建立自己的产品列表（New List），该列表包含几个大类，大类下面又有小类，直至具体的产品。现在要做的就是，请一个专业人员，根据一个别的渠道来的列表（Old List），建立自己的产品列表。
根据需求，这两个列表(dijit.tree)要实现的最重要的功能就是支持拖拽（Drag & drop）：从左边的列表拖动节点到右边的列表。为了达到目标，还需要进行诸多精细控制，列举如下：
1.在dijit.Tree上拖拽节点
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="width: 500px;"><div class="title_bar">Old List</div><div id="tree_1"></div></div><div data-dojo-type="dojox.layout.ContentPane" data-dojo-props="region:’center’,splitter:true"><div class="title_bar">New List</div><div id="tree_2"></div></div></div><script>dojoConfig = {isDebug : false,parseOnLoad : true,async : true,packages : [ {name : "custom",location : "../../js/custom"} ]};</script><script type="text/javascript" src="../js/dojo/dojo.js"></script><script>require(["dijit/layout/BorderContainer","dojox/layout/ContentPane","dijit/form/Button" ]);</script><script>require([ "dojo/ready","dijit/registry","dojo/_base/array","dojo/on","dojo/dom","dojo/query","dojo/data/ItemFileWriteStore","dojo/store/Observable","dijit/tree/ForestStoreModel","dijit/Tree","custom/TreeDndSource","custom/TreeDndTarget"],function(ready, registry, array, on, dom, query,ItemFileWriteStore, Observable, ForestStoreModel,Tree, customDndSource, customDndTarget) {ready(function() {//创建左边的树var data_1 = {identifier: ‘id’,label: ‘name’,items: [{id: ‘0’,name:’Foods’,type: ‘level1’,children:[{_reference: ‘1’},{_reference: ‘2’},{_reference: ‘3’}]},{id: ‘1’,name:’Fruits’,type: ‘level2’,children:[{_reference: ‘5’},{_reference: ‘6’}]},{id: ‘5’,name:’Orange’,type:"level3"},{id: ‘6’,name:’Apple’,type:"level3"},{id: ‘2’,name:’Vegetables’,type: ‘level2’},{id: ‘3’,name:’Cereals’,type: ‘level2’,children:[{_reference: ‘4’}]},{id: ‘4’,name:’Rice cereal: industrially manufactured baby food based on rice’,type:"level3"}]};var store_1 = new ItemFileWriteStore({data : data_1});store_1 = new Observable(store_1);var model_1 = new ForestStoreModel({store : store_1,query : {type : ‘level1’}});var tree_1 = new Tree({id : "tree_1",model : model_1,showRoot : false,dndController : customDndSource, //控制拖动dragThreshold : 8,betweenThreshold : 5,persist : true}, "tree_1");//创建右边的树var data_2 = {identifier: ‘id’,label: ‘name’,items: [{id: ’10’,name:’Foods’,type: ‘level1′},{id: ’11’,name:’Water’,type: ‘level1’}]};var store_2 = new ItemFileWriteStore({data : data_2});store_2 = new Observable(store_2);var model_2 = new ForestStoreModel({store : store_2,query : {type : ‘level1’}});var tree_2 = new Tree({id : "tree_2",model : model_2,showRoot : false,dndController : customDndTarget, //控制拖拽dragThreshold : 8,betweenThreshold : 5,persist : true}, "tree_2");});});</script></body>支持从左边的树上拖动节点，并进行精细控制
TreeDndSource.js
一个人的天地是冷得连呼吸都会寂寞的颤栗，而麻烦，
