« after before のhover時のcss | メイン | touch系イベントの順番 »
2020年10月11日
drag&drop系のメモ
※動作は試してない。
1,移動元の要素に
draggable="true"
で要素をドラッグ可能にする
２、移動先に
dropzone="copy"
ドラッグされるデータのコピーがドロップされる
dropzone="move"
ドラッグされるデータが移動してドロップされる
dropzone="link"
ドラッグされるデータ元へのリンクがドロップされる
３、ｊｓで ドラッグ開始時にDataTransferというオブジェクトにドラッグするデータをセット
$("#h").on("dragstart",function(e){
e.dataTransfer.setData("id", e.target.id);
});
４、ドロップ時
$("#移動先要素").on("dragover", function(e){
e.preventDefault();//元からある動作無し （必須ではない？）
e..originalEvent.stopPropagation();//バブリング無し（必須ではない？）
var id_name = event.dataTransfer.getData("id");
});
とおもったけど、なんかおかしいというか、思ってるのと違うような…
dropzone="copy" って動いてないような？というか使い方ちがうのか？
結局ondropイベントが登録されてる場所にドロップ可能になってるような？？
このあたり、よーわからん。
※dragover イベントの登録も必要なようだ。
$("body").on('dragover', "#otosubasyo", function () {
return false;
});
-----------------------------
ゴチャゴチャ書いたが以下に落ち着いた
drag&dropではなくdrag&drop風の動作
移動でつかめる部分はcssでcursor:moveに
移動でつかめる部分を mousedownで、移動する部分をposition:rerativeに
mousedownしたらマウスの初期位置を取得するのと何かしら移動中のフラグをつける
bodyのmousemoveイベントで移動中であればマウスの移動距離を取得
初期値と現在地の違いから移動する部分のtopとleftを変更でマウスについてくる感じになる
bodyのmouseupイベントで移動中であれば移動中フラグ取り消しdropする範囲内であればdrop処理する
移動でつかめる部分を元の位置に戻す場合はposition left topを元に戻す
---------------------------------
が これだとスクロールした場合など微妙にずれるので・・・
マウスダウンした時に要素のどの座標をつかんでいるかを記録
offset().top -e.pageX
mousemoveでマウスの座標と最初に記録した座標から現在のoffset({top:....,left:.... })を設定
これでずれない！
投稿者 muuming : 2020年10月11日 05:53