1

我有这个 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();
                }
            }

        });

    },

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

4

1 回答 1

1

将其迁移到触摸的挑战主要是触摸时没有鼠标悬停。

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

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

要添加触摸，

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

在示例中：

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”参数。您可能需要查询它以确保它是您想要传递给可拖动界面的触摸事件。

希望有帮助！纳什

于 2012-06-29T03:59:23.527 回答