mootools 元素追加_使用MooTools 1.2将元素拖放到垃圾箱

mootools 元素追加

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创建垃圾桶类的原因。

View Demo 观看演示

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”项目。

View Demo 观看演示

我将用它做什么？ (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 元素追加