1. mousedownを検出。オブジェクト（a とする）上なら a のコピー a' をリストAの外にコピー、absolute にしてカーソルに追従するよう mousemove するたびに座標を動かす。a は取り敢えず display:none にする。 2. 動かした先に別のオブジェクト（b）があるなら、b の座標とサイズを保存し、a' のサイズ分マージンを取って下に下げる。 3. b の元の範囲外に a' が動いたら b のマージンを取って元に戻す。動かした先に c があるなら2と同じ処理。 4. mouseupを検出し、それが b や c の上なら、DOMを操作して b（または c など）の前に a' をコピー。元の a は削除。
25 件の回答
ヒント：座標
どこに悩むことがあるの？キレイに書こうとせず、アルゴリズムを適当に書き出してみなよ。
jQueryUIでええやん
drag and drop用のWeb APIがブラウザに標準で実装されてるから、それ使えばOK。
勉強のためでしょ？じゃなきゃ⇧ので終わりだし。
下記URLのようなことをVanillaで実装したいのです。
(サンプルはvue.draggableを使用していますが)
http://hoge0hoge.html.xdomain.jp/
理由は6さんの仰っているように勉強のためです。
1. mousedownを検出。オブジェクト（a とする）上なら a のコピー a' をリストAの外にコピー、absolute にしてカーソルに追従するよう mousemove するたびに座標を動かす。a は取り敢えず display:none にする。
2. 動かした先に別のオブジェクト（b）があるなら、b の座標とサイズを保存し、a' のサイズ分マージンを取って下に下げる。
3. b の元の範囲外に a' が動いたら b のマージンを取って元に戻す。動かした先に c があるなら2と同じ処理。
4. mouseupを検出し、それが b や c の上なら、DOMを操作して b（または c など）の前に a' をコピー。元の a は削除。
大まかにはこうじゃないかな。やってないけど。
Re:8
回答5でやりなはれ。vanillaが素のjsって意味なら素にはdom関連の仕様は含まれないから、結局、web apiを使うことになる。
Re:10
ECMAScriptじゃないんだから
ライブラリ使ってできるなら、そのライブラリのソースコード読むのが一番手っ取り早いと思うよ
Re:12
精一杯考えた後や汚いコードでも動作確認してからでしょ。勉強にならないよ
Re:10
HTML5 APIの間違いでは…
Re:14
https://developer.mozilla.org/ja/docs/Web/Reference/API
html5で追加された機能含めて、web apiってことだと思ってるんだけど、自信なくなってきた笑
ちなみにサンプルはドラッグ・ドロップいらないというオチでご愁傷様です
Re:17
頑張ったな少年！
Re:17
Vanillaじゃねーじゃんって思ったの俺だけ？
Re:19
あぁ、オブジェクト処理でVueを使ってるのは目をつぶってちょ！(>_<)
サンプルから流用しているから、面倒くさかったんや。。。
Re:15
ほう…最近はこーなってんのか。Web APIってーと、Yahoo! の形態素解析とかの REST API 的なものを想像するので…失礼しました。
Re:21
APIはアプリケーション・プログラミング・インターフェースの略で、アプリケーションを外部から使用するための機能のことだから、HTML、ブラウザもアプリケーションなので、その機能(ドラッグ＆ドロップなど)を制御するための機能だからAPIなんやで。
(あってるのかな…ﾄﾞｷﾄﾞｷ)
Re:22
いや API の定義は知ってるが、「Web API」となると「ブラウザの外」「ネット全体」をイメージしてしまうもので…
Re:23
あぁ、「Web」がつくからか。
ブラウザAPIとかだったらしっくりくる的なね。
Re:17 スマホには対応してないのね
https://www.html5rocks.com/ja/tutorials/dnd/basics/
これでしょ