6

我在 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>
4

2 回答 2

3

好的，看起来这里有几个问题。据我所知，mootools 中没有“可丢弃”之类的东西。这意味着您的“进入”、“离开”和“放下”等事件将不起作用。（这些是拖动对象上的事件）

如果您将这些名称更改为 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

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

于 2008-08-16T00:13:57.603 回答
1

According to Mootools Docs, "droppables" is one of the options expected by the Drag.Move class. In fact, this is the array of elements that interact with the element when it fires the "drop," "enter," and "leave" event.

于 2012-03-30T01:05:06.700 回答