你如何使 mootools 拖放与触摸一起工作？

Question

我有这个 Javascript Mootools 代码： 拖动开始：函数（）{

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 类，不一定是一个事件，所以这些应该不是问题。考虑将其重命名以进行维护。如果有任何与可拖动组件相关的悬停或鼠标悬停样式/事件，则预计它需要被迁移。

要添加触摸，

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

在示例中：

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

1. 将“检测移动事件的能力映射到您现有的：onEnter、onLeave、onDrop 处理程序。

类似这样的：

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

});

此外，请查看传入的“e”参数。您可能需要查询它以确保它是您想要传递给可拖动界面的触摸事件。

希望对您有所帮助！纳什