穆工具：拖放问题

Question

我向 Mootools 网站上的论坛提出了这个问题，有人说我的课程选择已损坏，然后管理员出现并将我的帖子状态更改为无效。不用说，这并没有多大帮助。然后我发布到了 mootools 的谷歌群组，但没有得到回应。我的问题是为什么我的 '.drop' 元素没有触发 'enter'、'leave'、'drop' 事件？.drag 元素的事件正在运行。

<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 中没有“droppable”这样的东西。这意味着“进入”、“离开”和“放弃”等事件将不起作用。（这些是拖动对象上的事件）

如果您将这些名称更改为 mootools 中元素所具有的事件（如 DOM 事件），您的代码将完美运行。例如，如果您将“enter”和“leave”更改为“mouseover”和“mouseout”，则您的事件将毫无问题地触发。（Windows Vista 上的 Opera 9.51）

这似乎是文档中的相关行，即使用 DOM 事件的统计信息。

http://docs.mootools.net/Element/Element.Event#Element:addEvents

此外，在该页面上，还有一个指向常规元素可以具有的事件的链接

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

然而， “TG in SD”在 nabble 论坛中给您的建议 可能是最好的。如果可以的话，不要费心使用这些事件。将您需要执行的任何操作放入可拖动对象中，从而省去所有这些麻烦。

Answer 2

根据 Mootools 文档, "droppables“是人们期望的选择之一 Drag.Move 班级。事实上，这是在元素触发“时与元素交互的元素数组”drop," "enter，“ 和 ”leave“ 事件。