Mootools:拖放问题

时间:2020-03-05 18:39:23  来源:igfitidea点击:

我已经在Mootools网站上的论坛上问了这个问题,一个人说我的班级选择被破坏了,之后管理员来了并将我的职位状态改为无效。不用说,这并没有太大帮助。然后,我没有回应就发布到了mootools的Google组。我的问题是,为什么我的.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>

解决方案

回答

好的,这里似乎有几个问题。据我所知,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"建议可能是最好的。如果可以的话,请不要理会这些事件。将我们需要做的所有事情都放在可拖动对象中,并为自己省去所有的麻烦。