dnd実装の続編 - メモメモ＾＾

以前html5のドラックアンドドロップ実装してみたけど、これ入れ替え方式で、差し込み形式じゃない。また、そういうの想定してないAPIなんでしょうね。違うの？

当然、紹介してるサイトもどこも、この入れ替え方式なんです。でも、jqueryは鮮やかに差し込み形式を導入できるライブラリがあるし、いちいち入れ替え方式だと、順番入れ替えの手順も増す訳。だから求められるわけ

何が、出来ないかというと、「drop」「drageend」が肝になる。差し込み形式だと、htmlの構成がずれるせいだと予想してるんだけど、「drageend」が起動しない。

なもんで、「drop」で差し込みに必要な情報を取得して、実施は「drageend」で実行する。すると、うまく動いてくれた。

//drop
$('ul li').on('drop', function(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }

  if (dnd.dragSrcEl != this) {
    dnd.exe_flag = 1;//入れ替えする合図のフラグ
    dnd.dropSrcElNm = index;//ドロップした位置

    //差し込みなんで、対象を上げるか下げるかが必要
    if(dnd.dragSrcElNm > dnd.dropSrcElNm) {
      dnd.act = 'up';
    } else {
      dnd.act = 'down';
    }

    //ここ必要ないけど、IE判定めんどいのでここで、変数に格納(html5 dnd API 形無し)
    if(ua.isIE) {
      dnd.data = e.originalEvent.dataTransfer.getData('text');
    } else {
      dnd.data = e.originalEvent.dataTransfer.getData('text/html');
    }
  }
});

//dragend
$('ul li').on('dragend', function(e) {
  if(dnd.exe_flag == 1) {
    if(dnd.act == "up") {
      $('ul li').eq(dnd.dragSrcElNm).remove();
      $('ul li').eq(dnd.dropSrcElNm).before(dnd.data);
    } else {
      $('ul li').eq(dnd.dropSrcElNm).after(dnd.data);
      $('ul li').eq(dnd.dragSrcElNm).remove();
    }
    //APIとか
    //...
    dnd.exe_flag = 0;//実施済みでフラグ戻す
  }
  //デザイン戻すとか
  //...
});

以前の妄想サンプルを抜き出て変更しているんで、ここだけだと当然動かない。
また、セレクタは、適当に書き換える必要もある。

最後になるが、html5のdndには、ブラウザ側によるものなのか、根本的な問題がある。それは、htmlの構成がjsなどで書き換えられると、正常に動作しないことだ。
都度、リロードしたり対応することになる。非同期が全盛の時代に導入の障壁は高い