CreateJS IE10/11 タッチ端末でドラッグ＆ドロップ（スワイプ）

概要

Flash CC からのCanvas書き出しでのドラッグ＆ドロップ（兼タッチ端末でのスワイプ）の実現にあたって、ネット上にあるサンプルコードで、Androidブラウザ、Chrome、Safariなどでのマウス操作/タッチ操作はうまく動作する。IE10/11もマウス操作はうまく動作する。
が、IE10/11のタッチ端末での動作だけ、なかなかうまく動かせずハマったのでメモ。

注：FlashやCreateJSの細かいバージョンで、いろいろ変わるようなので201.04.20現在の最新情報としてご覧ください。

環境

Flash CC Ver.13.1 を適用済。
このバージョンから、書き出し方法が変わっています。
参考 http://plus.adobe-adc.jp/post-5022/

参考

・IE10/11のタッチ操作でうまく動くもの
　http://kudox.jp/java-script/createjs-easeljs-event
　この中のドラッグ＆ドロップのサンプル
・IE10/11のタッチ操作でうまく動かなかったもの
　http://pops-web.com/main/pops/archives/221
　ここにあるサンプル

コード(Flash内タイムライン上のJavaScript)

aaというインスタンス名をつけたMovieClipをステージに配置します。
細かい説明は省きますが、水平方向にドラッグ移動できるようにしました。

if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage, true);
}

function mouseDownHandler(mouseDownEvent){
    console.log("down");
    var target = mouseDownEvent.target;
    var basex = target.x - mouseDownEvent.stageX;
    function pressMoveHandler(pressMoveEvent){
        console.log("move");
        target.x = basex + pressMoveEvent.stageX;
        stage.update();
    }
    function pressUpHandler(pressUpEvent){
        target.removeEventListener("pressmove", pressMoveHandler);
        target.removeEventListener("pressup", pressUpHandler);
        console.log("up");
    }
    target.addEventListener("pressmove", pressMoveHandler);
    target.addEventListener("pressup", pressUpHandler);
}

this.aa.addEventListener("mousedown",mouseDownHandler);

これを書きだしたもの
http://dev.elephancube.jp/qiita/drag140420.html
・・・IE10/11のタッチ端末だけ、動きません。

解決法

Flashから書き出されたhtmlに手を加えます。

書き換えポイント1

Flash CC 13.1 で書き出されるCreateJSが、EaseJS 0.7.0 と TweenJS 0.5.0 ですが、最新は、EaseJS 0.7.1 と TweenJS 0.5.1。このマイナーバージョンの違いで変わるので、CreateJS本家サイトから最新版をダウンロードしてきて、リンクを変更する。

CreateJS本家サイト http://www.createjs.com/

書き換え前

<script src="libs/easeljs-0.7.0.min.js"></script>
<script src="libs/tweenjs-0.5.0.min.js"></script>
<script src="libs/movieclip-0.7.0.min.js"></script>

書き換え後

<script src="libs2/easeljs-0.7.1.min.js"></script>
<script src="libs2/tweenjs-0.5.1.min.js"></script>
<script src="libs2/movieclip-0.7.1.min.js"></script>

書き換えポイント2

Flash CC 13.1 で書き出されたままのhtmlだと、Tickerイベントが動作していない！？（定義はされているが、挙動しているのか不明。）ようなので、明示的に定義する。

書き換え前（function init()内）

createjs.Ticker.addEventListener("tick", stage);

書き換え後（function init()内）

function tickHandler(evt) {
    stage.update();
}
createjs.Ticker.addEventListener("tick", tickHandler);

書き換えた後
http://dev.elephancube.jp/qiita/drag140420kai.html
うごいたー！！

ソース

flaファイルと書き換え前後のhtmlファイルを入れています。欲しい方はどうぞ。
http://dev.elephancube.jp/qiita/drag140420_src.zip