使用http://dojotoolkit.org/documentation/tutorials/1.10/store_driven_tree/index.html中的想法，我正在尝试使用drap-and-drop实现一棵树。
以下是我的树的简化版本。请注意，checkItemAcceptance（）可以判断是否正在移动项目（未按下ctrl键）或复制（按住Ctrl键 ed）...但我不知道如何从aspect-wrapped put（）方法中分辨出来。有什么建议吗？
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/resources/dojo.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dijit/themes/claro/claro.css"/>
</head>
<body class="claro">
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js" data-dojo-config="async: true"></script>
<h1>Demo</h1>
<script type="text/javascript">
require(["dojo/dom","dojo/store/Observable","dojo/store/Memory","dojo/store/JsonRest","dijit/tree/ObjectStoreModel","dijit/Tree",
"dojo/aspect","dijit/tree/dndSource","dijit/registry","dojo/domReady!"],
function(dom,Observable,Memory,JsonRest,ObjectStoreModel,Tree,aspect,dndSource,registry) {
var jstore = new Memory({
data:[
{id:1,name:"/", parent_id:null,item_type:"folder",rwx:5},
{id:2, name:"dir1", parent_id:1, item_type:"folder",rwx:7},
{id:3, name:"dir2", parent_id:1, item_type:"folder",rwx:7},
{id:4, name:"file1", parent_id:3, item_type:"file" ,rwx:7},
{id:5, name:"file2", parent_id:3, item_type:"file" ,rwx:7},
],
getChildren: function(obj) {
return this.query({parent_id:obj.id});
}
});
aspect.around(jstore,"put",function(originalPut) {
return function(obj,options) {
console.log("store.put("+JSON.stringify(obj)+","+JSON.stringify(options));
if (options && options.parent) {
obj.parent_id = options.parent.id;
}
return originalPut.call(jstore,obj,options);
};
});
var store = new Observable(jstore);
var myModel = new ObjectStoreModel({
store: store,
query: {id:1}
});
myModel.getLabel = function(item) {
return JSON.stringify(item);
};
myModel.mayHaveChildren = function(item) {
return item.item_type == 'folder';
};
var tree = new Tree({
model: myModel,
getIconClass: function(item,opened) {
console.log("tree.getIconClass: " + JSON.stringify(item));
return (item.item_type == 'folder') ? ( opened ? "dijitFolderOpened" : "dijitFolderClosed" ) : 'dijitLeaf';
}
});
var mydnd = new dndSource(tree,{
checkItemAcceptance: function(target,source,position) {
var targetItem = registry.byNode(target.parentNode).item;
var sourceItems = registry.byNode(source.node).selectedItems;
if (targetItem.item_type != 'folder') {
console.log("checkItemAcceptance; dest is not a folder: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
if (!(targetItem.rwx & 2)) {
console.log("checkItemAcceptance; can't create in dest: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
for (var i=0; i < sourceItems.length; ++i) {
x = sourceItems[i];
if (x.parent_id == targetItem.id) {
console.log("checkItemAcceptance; same directory: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
if (!(x.rwx & 4)) {
console.log("checkItemAcceptance; item not readable: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
if (source.sourceState == 'Moved') { // as opposed to 'Copied'
var parentItem = registry.byNode(registry.byNode(source.node).selectedNodes[0].domNode.parentNode.parentNode).item;
//console.log("checkItemAcceptance: parentItem is " + JSON.stringify(parentItem));
if (!(parentItem.rwx & 2)) {
console.log("checkItemAcceptance; from folder doesn't allow delete: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
}
};
return 1;
}
});
tree.dndController = mydnd;
tree.placeAt(dom.byId("treePlaceholder"));
tree.startup();
});
</script>
<div id="treePlaceholder"/>
</body>
</html>
答案 0 :(得分：1)
我认为，我的解决方案只是略显难看;它涉及重写ObjectStoreModel的pasteItem（）方法以添加新属性＆＃39; isCopy＆＃39;它传递给商店的put（）方法的选项。这是我修改过的示例：
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/resources/dojo.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dijit/themes/claro/claro.css"/>
</head>
<body class="claro">
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js" data-dojo-config="async: true"></script>
<h1>Demo</h1>
<script type="text/javascript">
require(["dojo/dom","dojo/store/Observable","dojo/store/Memory","dojo/store/JsonRest","dijit/tree/ObjectStoreModel","dijit/Tree",
"dojo/aspect","dijit/tree/dndSource","dijit/registry","dojo/Deferred","dojo/_base/lang","dojo/_base/array","dojo/domReady!"],
function(dom,Observable,Memory,JsonRest,ObjectStoreModel,Tree,aspect,dndSource,registry,Deferred,lang,array) {
var jstore = new Memory({
data:[
{id:1,name:"/", parent_id:null,item_type:"folder",rwx:5},
{id:2, name:"dir1", parent_id:1, item_type:"folder",rwx:7},
{id:3, name:"dir2", parent_id:1, item_type:"folder",rwx:7},
{id:4, name:"file1", parent_id:3, item_type:"file" ,rwx:7},
{id:5, name:"file2", parent_id:3, item_type:"file" ,rwx:7},
],
getChildren: function(obj) {
return this.query({parent_id:obj.id});
}
});
aspect.around(jstore,"put",function(originalPut) {
return function(obj,options) {
console.log("store.put("+JSON.stringify(obj)+","+JSON.stringify(options));
if (options && options.parent) {
obj.parent_id = options.parent.id;
}
return originalPut.call(jstore,obj,options);
};
});
var store = new Observable(jstore);
var myModel = new ObjectStoreModel({
store: store,
query: {id:1},
// A modified copy of dojo 1.10.0's dijit/tree/ObjectStoreModel.js's
pasteItem: function(/*Item*/ childItem, /*Item*/ oldParentItem, /*Item*/ newParentItem,
/*Boolean*/ bCopy, /*int?*/ insertIndex, /*Item*/ before){
// summary:
// Move or copy an item from one parent item to another.
// Used in drag & drop.
var d = new Deferred();
if(oldParentItem === newParentItem && !bCopy && !before){
// Avoid problem when items visually disappear when dropped onto their parent.
// Happens because the (no-op) store.put() call doesn't generate any notification
// that the childItem was added/moved.
d.resolve(true);
return d;
}
if(oldParentItem && !bCopy){
// In order for DnD moves to work correctly, childItem needs to be orphaned from oldParentItem
// before being adopted by newParentItem. That way, the TreeNode is moved rather than
// an additional TreeNode being created, and the old TreeNode subsequently being deleted.
// The latter loses information such as selection and opened/closed children TreeNodes.
// Unfortunately simply calling this.store.put() will send notifications in a random order, based
// on when the TreeNodes in question originally appeared, and not based on the drag-from
// TreeNode vs. the drop-onto TreeNode.
this.getChildren(oldParentItem, lang.hitch(this, function(oldParentChildren){
oldParentChildren = [].concat(oldParentChildren); // concat to make copy
var index = array.indexOf(oldParentChildren, childItem);
oldParentChildren.splice(index, 1);
this.onChildrenChange(oldParentItem, oldParentChildren);
d.resolve(this.store.put(childItem, {
overwrite: true,
parent: newParentItem,
oldParent: oldParentItem,
before: before,
isCopy: false
}));
}));
}else{
d.resolve(this.store.put(childItem, {
overwrite: true,
parent: newParentItem,
oldParent: oldParentItem,
before: before,
isCopy: true
}));
}
return d;
},
});
myModel.getLabel = function(item) {
return JSON.stringify(item);
};
myModel.mayHaveChildren = function(item) {
return item.item_type == 'folder';
};
var tree = new Tree({
model: myModel,
getIconClass: function(item,opened) {
console.log("tree.getIconClass: " + JSON.stringify(item));
return (item.item_type == 'folder') ? ( opened ? "dijitFolderOpened" : "dijitFolderClosed" ) : 'dijitLeaf';
}
});
var mydnd = new dndSource(tree,{
checkItemAcceptance: function(target,source,position) {
var targetItem = registry.byNode(target.parentNode).item;
var sourceItems = registry.byNode(source.node).selectedItems;
if (targetItem.item_type != 'folder') {
console.log("checkItemAcceptance; dest is not a folder: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
if (!(targetItem.rwx & 2)) {
console.log("checkItemAcceptance; can't create in dest: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
for (var i=0; i < sourceItems.length; ++i) {
x = sourceItems[i];
if (x.parent_id == targetItem.id) {
console.log("checkItemAcceptance; same directory: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
if (!(x.rwx & 4)) {
console.log("checkItemAcceptance; item not readable: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
if (source.sourceState == 'Moved') { // as opposed to 'Copied'
var parentItem = registry.byNode(registry.byNode(source.node).selectedNodes[0].domNode.parentNode.parentNode).item;
//console.log("checkItemAcceptance: parentItem is " + JSON.stringify(parentItem));
if (!(parentItem.rwx & 2)) {
console.log("checkItemAcceptance; from folder doesn't allow delete: "+source.sourceState+" items "+JSON.stringify(sourceItems)+" to "+JSON.stringify(targetItem));
return 0;
}
}
};
return 1;
}
});
tree.dndController = mydnd;
tree.placeAt(dom.byId("treePlaceholder"));
tree.startup();
});
</script>
<div id="treePlaceholder"/>
</body>
</html>
答案 1 :(得分：0)
您无需使用自己的代码区分移动副本;这个逻辑已经由dojo dnd模块和dijit树实现。但是，您需要一个本机支持put（）方法的商店，并且可以在分层结构中定位项目。 MemoryStore不支持这一点，并且put（）的方面只是一个hack，使它可以用简单的例子。可以使用的商店是ItemFileWriteStore。这个answer有一个带有ItemFileWriteStore的树的例子。