mootools 元素追加
![](https://i-blog.csdnimg.cn/blog_migrate/fa22702b7d17a1cb3dab88cc858f28d8.png)
Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's why I've created a trash can class using MooTools 1.2.
每个人都喜欢将垃圾文件从桌面拖到垃圾桶中。 在计算机上做一些您在现实生活中也会做的事情具有一定讽刺意味。 这也是摆脱事物的快速方法。 这就是为什么我使用MooTools 1.2创建垃圾桶类的原因。
CSS (The CSS)
#trash { width:141px; height:246px; float:left; background:url(trash.jpg) 0 0 no-repeat; }
.trashable { background:#eee; padding:20px; font-size:24px; width:50px; height:50px; margin:10px; text-align:center; cursor:move; }
Nothing special. I set the trash can in the background of a DIV and set some default styles for the "trashables" class.
没什么特别的。 我在DIV的背景中设置了垃圾桶,并为“ trashables”类设置了一些默认样式。
XHTML (The XHTML)
<div id="trash"></div>
<div class="trashable"></div>
<div class="trashable"></div>
<div class="trashable"></div>
Just a trash DIV and the trash items.
只是垃圾DIV和垃圾物品。
MooTools 1.2类别 (The MooTools 1.2 Class)
/* class */
var trashCan = new Class({
//implements
Implements: [Options,Events],
//options
options: {
trashCan: $('trash'),
trashables: $$('.trashable')
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
//prevent def
document.ondragstart = function() { return false; };
//drag/drop
$$('.trashable').each(function(drag) {
new Drag.Move(drag, {
droppables: this.options.trashCan,
onDrop: function(el,droppable) {
if(droppable) {
alert('Disposing of ' + el.get('rel') + '!');
drag.dispose();
}
},
onEnter: function(el,droppable) {
},
onLeave: function(el,droppable) {
}
});
}.bind(this));
}
});
/* usage */
var trash = new trashCan({
trashCan: $('trash'),
trashables: $$('.trashable')
});
The class is extremely simple to use! All you need to do is provide "trashCan" and "trashables" items.
该类非常简单易用! 您需要做的就是提供“ trashCan”和“ trashables”项目。
我将用它做什么? (What Would I Use This For?)
Lots of things. Managing the server's file collection from within a browser, for example, would be a great usage. You could also create a bunch of tasks that you delete when you have them completed.
很多事情。 例如,从浏览器内部管理服务器的文件收集将是一种很好的用法。 您还可以创建一堆任务,完成后将其删除。
hare your thoughts and ideas for this class!
在这堂课上,请多多关照!
翻译自: https://davidwalsh.name/drag-drop-elements-trash-mootools
mootools 元素追加