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 に新たに追加された大きな機能の 1 つは、モバイル イベント (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 に答える