Mootools - добавьте переменные ко всем перетаскиваемым и сбрасываемым элементам с помощью .implement - PullRequest
Новая
       17

Mootools - добавьте переменные ко всем перетаскиваемым и сбрасываемым элементам с помощью .implement

1 голос
/ 09 июля 2011

Я делаю систему перетаскивания с классом drag.move в mootools, но мне нужны все перетаскиваемые и сбрасываемые элементы, чтобы иметь некоторые дополнительные переменные и, возможно, добавить в одну или две функции.Я исследовал, как это сделать, используя .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?Могу ли я добавить эти вещи ко всем перетаскиваемым и сбрасываемым элементам?Ты заранее!

-Thaiscorpion

edit:Я пытался добавить параметры непосредственно в основной класс в библиотеке mootools и пытался получить к ним доступ из события onEnter, например: 

    onEnter: function(draggable, droppable){</p>

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



},
</code>

, но не получал ничего для работы.1014 *

1 Ответ

1 голос
/ 09 июля 2011

вы можете использовать элемент хранилища. 

draggable.store("occupied", true);

.... 

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

}

.... функции или что-либо может храниться для каждого элемента 

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

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

и пр.

использовать агрегат: 

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

// allows you:

$("someid").dragfoo();

хотя, если вам нужно хранилище, используйте хранилище и не храните свойства фактического элемента. В хранилище mootools действительно используется хеш-таблица объектов, которая находится за замыканием. Наличие собственных атрибутов / свойств элемента в IE может значительно замедлить доступ к элементу.

...