Mootools - 使用 .implement 将变量添加到所有可拖动和可放置的元素

Question

我使用 mootools Drag.move 类制作拖放系统，但我需要所有可拖动和可放置的元素具有一些额外的变量，并且可能添加一两个函数。我研究了如何使用 .implement 来做到这一点，但我不知道如何将其融入到我的代码中：

window.addEvent('domready', function(){

 $$('#draggables DIV').makeDraggable({

droppables: $$('#droppables DIV'),

onEnter: function(draggable, droppable){
    droppable.setStyle('background', 'orange');
    droppable.setStyle('opacity', '0.4');
    snap_left = droppable.getStyle('left');
    snap_top = droppable.getStyle('top');   
    document.getElementById("slot").innerHTML=droppable.id;
},

onLeave: function(draggable, droppable){
    droppable.setStyle('background', null);
},

onDrop: function(draggable, droppable){

    if (droppable){
        droppable.setStyle('background', '');
        draggable.setStyle('left', snap_left );
        draggable.setStyle('top', snap_top );                   
    } else {
        draggable.setStyle('left', snap_left );
        draggable.setStyle('top', snap_top );
    }
}

 });

});

我想要的是否可以使用 .implement？
我可以将这些东西添加到所有可拖动和可放置的元素中吗？
提前！

-泰国蝎子

编辑：
我尝试直接向 mootools 库中的主类添加选项，并尝试从 onEnter 事件访问它们，如下所示：

    onEnter: function(draggable, droppable){


    if (droppable.occupied){ //here is where im tryin to acces it, the default option is set to occupied: true
        droppable.setStyle('background', 'red');
        droppable.setStyle('opacity', '0.4');
        document.getElementById("slot").innerHTML=droppable.id;
    } else {
        droppable.setStyle('background', 'orange');
        droppable.setStyle('opacity', '0.4');
        snap_left = droppable.getStyle('left');
        snap_top = droppable.getStyle('top');   
        document.getElementById("slot").innerHTML=droppable.id;
    }



},

但没有任何工作。

Answer 1

您可以使用元素存储。

draggable.store("occupied", true);

....

if (draggable.retrieve("occupied") === true) {

}

.... 函数或任何内容都可以按元素存储

element.store("somekey", function() {
    element.toggleClass("foo");
});

element.retrieve("somekey").call(element);

，等等。

使用 Implement：

Element.implement({
    dragfoo: function() {
        this.set("drag", { });
        return this;
    }
});

// allows you:

$("someid").dragfoo();

不过，如果您需要存储，请使用存储并且不要在实际元素上存储属性。 mootools 存储实际上使用闭包后面的对象哈希表。在 IE 中拥有专有元素属性可能会大大减慢元素访问速度。