Инструменты обсуждения:Проблема с перетаскиванием

Question

Я задавал этот вопрос на форумах на веб-сайте Mootools, и один человек сказал, что мой выбор класса был поврежден до того, как появился администратор и изменил статус моей записи на недействительный.Излишне говорить, что это не сильно помогло.Затем я разместил сообщение в группе Google для mootools без ответа.Мой вопрос в том, почему события 'enter', 'leave', 'drop' не запускаются для моих элементов '.drop'?События для .Перетаскиваемых элементов работают.

<title>Untitled Page</title>
<script type="text/javascript" src="/SDI/includes/mootools-1.2.js"></script>
<script type="text/javascript" src="/SDI/includes/mootools-1.2-more.js"></script>
<script type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {
        var fx = [];
        $$('#draggables div').each(function(drag){
            new Drag.Move(drag, {
                droppables: $$('#droppables div'),
                onDrop: function(element, droppable){
                    if(!droppable) {
                    }
                    else {
                        element.setStyle('background-color', '#1d1d20');
                    }
                    element.dispose();
                },
                onEnter: function(element, droppable){
                    element.setStyle('background-color', '#ffffff');
                },
                onLeave: function(element, droppable){
                    element.setStyle('background-color', '#000000');
                }
            });
        });

        $$('#droppables div').each(function(drop, index){
            drop.addEvents({
                'enter': function(el, obj){
                    drop.setStyle('background-color', '#78ba91');
                },
                'leave': function(el, obj){
                    drop.setStyle('background-color', '#1d1d20');
                },
                'drop': function(el, obj){
                    el.remove();
                }
            });
        });
    });
</script>

<form id="form1" runat="server">
<div>
    <div id="draggables">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

<div id="droppables">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
</div>

</div>
</form>

Answer 1

Хорошо, похоже, здесь есть пара проблем.Насколько я могу судить, в mootools нет такого понятия, как "удаляемый".Это означает, что ваши события, такие как "enter", "leave" и "drop", не будут работать.(Это события для объекта перетаскивания)

Если вы измените эти имена на события, которые есть у элементов в mootools (например, события DOM), ваш код будет работать идеально.Например, если вы измените "enter" и "leave" на "mouseover" и "mouseout", ваши события будут запускаться без проблем.(Opera 9.51 в Windows Vista)

Похоже, это последняя строка в документации для этого, которая позволяет использовать события DOM.

http://docs.mootools.net/Element/Element .Элемент Event#: Добавление событий

Также на этой странице есть ссылка на события, которые могут иметь обычные элементы

http://www.w3schools.com/html/html_eventattributes.asp

Однако, совет, который "TG in SD" дал вам на форумах nabble наверное, это лучше всего.Если вы можете, не утруждайте себя использованием этих событий.Поместите все, что вам нужно сделать, в перетаскиваемый объект и избавьте себя от всех этих хлопот.

Answer 2

Согласно Документы Mootools, "droppables" является одним из вариантов, ожидаемых Drag.Move класс.Фактически, это массив элементов, которые взаимодействуют с элементом, когда он запускает "drop," "enter, " и "leave" событие.