easyui-draganddrop
Version:
Drag and drop elements including a file explorer and a rubbish bin.
128 lines (97 loc) • 4.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link href="./dist/easyui-draganddrop.css" rel="stylesheet" type="text/css" media="all"/>
<link href="example.css" rel="stylesheet" type="text/css" media="all"/>
<title>EasyUI-DragAndDrop Example</title>
</head>
<body>
<div style="display:none;">
<ul>
<li class="directory" id="directory">
<button class="toggle"> </button><button class="name"></button>
<ul class="entries"></ul>
</li>
<li class="file" id="file">
<button class="name"></button>
</li>
<li class="marker" id="marker">
<button class="name"></button>
</li>
</ul>
</div>
<script src="./easyui.js"> </script>
<script src="./dist/easyui-draganddrop.js"> </script>
<script>
(function() {
var Body = easyui.Body,
Explorer = easyuidraganddrop.Explorer,
RubbishBin = easyuidraganddrop.RubbishBin;
var firstExplorer = Explorer.fromHTML('<ul class="first explorer"> </ul>', 'First explorer', onOpen, onMove),
secondExplorer = Explorer.fromHTML('<ul class="second explorer"> </ul>', 'Second explorer', onOpen, onMove),
rubbishBin = RubbishBin.fromHTML('<div class="rubbishBin"> </div>', onRemove),
body = new Body();
firstExplorer.addDroppableElement(rubbishBin);
firstExplorer.addDroppableElement(secondExplorer);
secondExplorer.addDroppableElement(firstExplorer);
secondExplorer.addDroppableElement(rubbishBin);
rubbishBin.addDroppableElement(firstExplorer);
rubbishBin.addDroppableElement(secondExplorer);
secondExplorer.addDirectory('Second explorer/First directory');
secondExplorer.addDirectory('Second explorer/Second directory');
secondExplorer.addFile('Second explorer/First directory/First file.fls');
secondExplorer.addFile('Second explorer/First directory/Second file.fls');
secondExplorer.addFile('Second explorer/Second directory/Third file.fls');
body.append(firstExplorer);
body.append(secondExplorer);
body.append(rubbishBin);
function onOpen(sourcePath, callback) {
console.log('open: ' + sourcePath)
}
function onMove(pathMaps, done) {
pathMaps.forEach(function(pathMap) {
var pathMapKeys = Object.keys(pathMap),
firstPathMapKey = first(pathMapKeys),
sourcePath = firstPathMapKey, ///
targetPath = pathMap[sourcePath],
movedPath = targetPath;
console.log('move: ' + sourcePath + ' -> ' + targetPath)
switch(sourcePath) {
case 'Second explorer/First directory/First file.fls':
console.log('...deleted.')
movedPath = null;
break;
case 'Second explorer/First directory/Second file.fls':
case 'Second explorer/First directory':
console.log('...left in place.')
movedPath = sourcePath;
break;
}
pathMap[sourcePath] = movedPath;
});
done();
}
function onRemove(pathMaps, done) {
pathMaps.forEach(function(pathMap) {
var pathMapKeys = Object.keys(pathMap),
firstPathMapKey = first(pathMapKeys),
sourcePath = firstPathMapKey, ///
removedPath = null;
console.log('remove: ' + sourcePath)
switch(sourcePath) {
case 'Second explorer/First directory/Second file.fls':
case 'Second explorer/First directory':
console.log('...left in place.')
removedPath = sourcePath;
break;
}
pathMap[sourcePath] = removedPath;
});
done();
}
function first(array) { return array[0]; }
})();
</script>
</body>
</html>