Mootools：拖放问题

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 论坛上给你的建议可能是最好的。如果可以的话，不要费心使用这些事件。将您需要执行的任何操作放入可拖动对象中，从而省去所有这些麻烦。