jQuery Sortableがスマホなどのタッチスクリーンで使えない場合の対処法

このコードをjQueryライブラリおよびjQuery UI関連のコードの後に追加して、タッチスクリーンに関するいくつかのプロパティを修正してください。

jQuery UIにTouch対応を追加（タッチ→マウス変換）

(function($){
  if (!('ontouchstart' in window)) return;

  var proto = $.ui.mouse.prototype;
  var _mouseInit = proto._mouseInit;

  $.extend(proto, {
    _mouseInit: function(){
      this.element.on("touchstart." + this.widgetName, $.proxy(this, "_touchStart"));
      _mouseInit.apply(this, arguments);
    },

    _touchStart: function(event){
      if (event.originalEvent.touches.length !== 1) return false;
      if (!this._mouseCapture(event, false)) return true;

      this.element
        .on("touchmove." + this.widgetName, $.proxy(this, "_touchMove"))
        .on("touchend." + this.widgetName, $.proxy(this, "_touchEnd"));

      this._modifyEvent(event);
      $(document).trigger("mouseup"); // 重置 mouseHandled
      this._mouseDown(event);
      return false;
    },

    _touchMove: function(event){
      this._modifyEvent(event);
      this._mouseMove(event);
    },

    _touchEnd: function(event){
      this.element
        .off("touchmove." + this.widgetName)
        .off("touchend." + this.widgetName);
      this._mouseUp(event);
    },

    _modifyEvent: function(event){
      var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
      event.which = 1;
      event.pageX = touch.pageX;
      event.pageY = touch.pageY;
    }
  });
})(jQuery);

コード解説

• このコードは、jQuery UI のウィジェット（draggable, sortable など）にタッチイベントを対応させるための拡張です。
• jQuery UI はマウスイベント（mousedown, mousemove, mouseup）に依存していますが、スマートフォンやタブレットなどのタッチデバイスではマウスイベントが発生しません。
• そこでこのコードでは、タッチイベントをマウスイベントに変換して jQuery UI に渡すことで、タッチ操作でも UI コンポーネントが正常に動作するようにしています。

注意点・補足

• 単一指の操作のみ対応
• touches.length === 1 によって、マルチタッチ操作は無効になります。ドラッグやリサイズのような単純な操作に限定されます。
• ピンチや回転などの複雑なジェスチャーには非対応
• マウスイベントに変換しているため、2本指操作や回転、長押しなどには対応していません。
• jQuery UI の mouse プラグインが必要
• このコードは jquery.ui.mouse.js の内部構造に依存しています。事前に読み込まれていないと機能しません。
• 対応環境は古典的な jQuery + HTML 構成のみ
• モダンなフレームワーク（Vue.js や React など）では非推奨。従来の jQuery ベースの画面に限定されます。
• イベント名前空間に this.widgetName を使用
• this.widgetName が設定されていない場合、.on() によるイベントバインドが失敗する可能性があります。
• タッチの圧力や角度などの高度な情報は扱えない
• あくまで「マウス操作の代替」として処理するため、シンプルな位置情報だけを使用します。

まとめ

このコードは、タッチイベント（touchstart / touchmove / touchend）をマウスイベントに変換することで、jQuery UI のコンポーネントがタッチデバイスでも動作できるようにする拡張です。

主な仕組み：

既存の _mouseDown, _mouseMove, _mouseUp をそのまま呼び出すことで動作をエミュレート

jQuery UI の mouse プラグインの初期化処理 _mouseInit をフック

タッチイベントの位置情報をマウスイベント風に加工