Mootools - добавете променливи към всички елементи с възможност за плъзгане и пускане с .implement


Създавам система за плъзгане и пускане с клас 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?
Мога ли да добавя тези неща към всички елементи с възможност за плъзгане и пускане?
предварително!

- Тайскорпион

редактиране:
Опитах да добавя опции директно към главния клас в библиотеката на 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;
    }



},

but not getting anything to work.


javascript class drag-and-drop expand mootools
person Thaiscorpion    schedule 09.07.2011    source източник

Отговори (1)


arrow_upward
1
arrow_downward

можете да използвате съхранение на елементи.

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 може значително да забави нещата при достъпа до елемента.

person Dimitar Christoff    schedule 09.07.2011