Question

我有这个Javascript Mootools代码： dragStart：function（）{

var scatterGame = this; // get current object so that can be referenced once out of scope

        $$('.begin-word').makeDraggable({

            container: $('start-game'),

            droppables: $$('.begin-def, #start-game'),

            onEnter: function(draggable, droppable) {
                draggable.addClass('mouseover');
                if (droppable != $('start-game')) {
                    droppable.addClass('mouseover');
                }
            },

            onLeave: function(draggable, droppable) {
                draggable.removeClass('mouseover');     
                droppable.removeClass('mouseover');
            },

            onDrop: function(draggable, droppable) {
                draggable.removeClass('mouseover');
                if (droppable.hasClass('begin-def')) {
                    draggable.setStyle('color','green');
                    droppable.setStyle('color','green');
                    scatterGame.instructionStart();
                }
            }

        });

    },

除了我需要它与触摸一起工作之外，它的效果很好。有没有办法使这项工作？

Answer 1

主要是将此移植到触摸上的挑战是没有鼠标悬停。

因此，您的第一个挑战是考虑将鼠标悬停事件转换为触摸事件。

我看到鼠标悬停可能是一个不幸的命名css类，不一定是一个事件，所以那些不应该是一个问题。考虑将其重命名以进行维护。如果有任何与可拖动组件关联的悬停或鼠标悬停样式/事件，则需要迁移它。

要添加触控，

你必须指定一个触摸框架，我看到有一个MooTools 1,3 demo here。还有其他人。

在示例中：

MooTools Core的一个重要新增功能是能够检测移动设备事件：touchstart，touchmove，touchend，touchcancel ......

将检测移动事件的＆＃34;功能映射到现有的：onEnter，onLeave，onDrop处理程序。

这样的事情：

//add touchstart event to the body
document.body.addEvent('touchstart',function(e) {
  //call onEnter, onLeave, onDrop

});

另外，看看＆＃39; e＆＃39;传入的参数。您可能希望查询它以确保它是您要传递到可拖动界面的触摸事件。

希望有所帮助！纳什

你如何通过触摸使mootool拖放工作？

1 个答案: