Question

我已经向Mootools网站上的论坛提出了这个问题，并且有人说我的课程选择在管理员出现之前已经损坏并且将我的帖子状态更改为无效。毋庸置疑，这并没有多大帮助。然后我发布了一个谷歌小组的mootools没有回应。我的问题是为什么'enter'，'leave'，'drop'事件不能解雇我的'.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中没有“可放置”的东西。这意味着您的“enter”，“leave”和“drop”等事件将无效。（这些是拖动对象上的事件）

如果将这些名称更改为mootools中的元素所具有的事件（如DOM事件中），则代码可以完美地运行。例如，如果您将“输入”和“离开”更改为“鼠标悬停”和“鼠标悬停”，您的事件就会毫无问题地触发。（Windows Vista上的Opera 9.51）

这似乎是文档中的重要内容，即使用DOM事件的统计信息。

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

此外，在该页面上，是指向常规元素可以拥有的事件的链接

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

然而，the advice "TG in SD" gave you in the nabble forums可能是最好的。如果可以，请不要理会使用这些事件。在可拖动对象中放置你需要做的任何事情，并省去所有这些麻烦。

Answer 2

根据Mootools Docs，“droppables”是Drag.Move类所期望的选项之一。实际上，这是在触发“drop”，“enter”和“leave”事件时与元素交互的元素数组。

Mootools：拖放问题

2 个答案: