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

Mootools - add variables to all draggable and droppable elements with .implement

本文关键字：拖动 元素 implement 使用 变量 添加 Mootools-      更新时间：2023-09-26


我用mootools的drag.move类制作了一个拖放系统，但我需要所有可拖动和可丢弃的元素都有一些额外的变量，并可能添加一两个函数。我已经研究过如何使用.eimplement来实现这一点，但我不知道如何将其融入我的代码中：

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 );
    }
}
 });
});

我想要的东西可以使用.eimplement吗？
我可以将这些东西添加到所有可拖动和可丢弃的元素中吗？
ty提前！

-Thaiscorpion

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

onEnter：函数(可拖动、可丢弃(｛
    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;
    }

},

但没有得到任何工作。

您可以使用元素存储。

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中具有专有的元素属性/属性会大大降低元素访问的速度。

相关文章：