「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove

[takeda25]

idをつけた要素がグローバル変数としてアクセスできるのは互換性のため。名前空間を汚染するし推奨されていない。getElementByIdとかを使うほうがいい。

[mayumayu_nimolove]

ものすごく基礎的なことだけどこうやって分解して理解していくのって一番上達するし楽しめる人は楽しめるんだよね

[raimon49]

調べればちゃんと技術情報が掲載されているMDNホンマえらい。

[jigokuezu]

初耳1について、この人が参照してる元元URLの説明に、document.getElementById() や document.querySelector() を使えって書いてあるじゃん。ちゃんとソースを読もう https://html.spec.whatwg.org/#named-access-on-the-window-object

[irh_nishi]

もともとJS側が使いにくくてjQueryとか他のいろんなモジュールが発明されてそれをJSが取り込んでるんだけどコンパチにするために結局はモジュール機能を使いがちで標準機能が使われないよね。fetchとかもそう。

[strawberryhunter]

$imgを参照したり、addEventListener()ではなくonpointermove に直接設定したりするあたりには懐かしさを感じた。setPointerCapture()は知らなかったので参考になった。

[spark7]

まあコメにもあるが昔ながらのmousedownから始める方法でも書けるし、ドラッグ先の対象との衝突判定とか色々必要だわな。要素をコラージュするアプリならこれで良いけども。

[hiroshe]

しらんかったわ。じゃあGetElementByIdはなんのためにあるんや。

[xlc]

でも普通は要素をドラッグしてやりたいのはそういうことじゃないよね。DOMを組み替え、それに付随した内部データも書き換えなきゃ意味がない。

[repon]

「フロントエンドは簡単だから（単価が）安い」という言説は、ホリエモンの「保育士の給料が安いのは誰でもできるから」という言葉と同じ。因果関係が逆で、直接は女性差別と排外主義。オフショアで儲けてるくせに

[Shinwiki]

ああ、これこれ。ブックマークし忘れててやっと見つけた。と思ったら推奨されてないんかい

[l-_-ll]

"HTML内でIDをつけた要素はグローバル変数に格納される仕様"

[uva]

「HTML内でIDをつけた要素はグローバル変数に格納される仕様」糞仕様だね！

[cl-gaku]

大昔はnameやid振った要素にグローバルからアクセスしまくったウルトラスパゲッティ大盛りフォームがそこら中にあったな

[stabucky]

素晴らしい。この手のテクニックは考えずにコピペすることにしているので。

[softstone]

知ってたとは言えない。/実験してるとすごいキモい。`appendChild(elem)`の後でelemのidをグローバル変数としてエラーなしに使えたりする。"use strict"でも止まらない。怖いよー。

[localnavi]

前に要素をドラッグ＆ドロップで操作するJavascriptを書いたときには、もっともっと面倒くさい事を書いたのに、桁違いに楽ちんになってる。もちろん、初耳だらけである

[yaboot]

setPointerCapture 知らんかった。sensitivity とか考慮する場合どうするんだろう、、、

[everybodyelse]

フロント全然わからない民

[Nan_Homewood]

知らない事だらけだった

[fukken]

最初のは、idだけじゃなくてname属性とかでも同じことができたはず。いにしえの作法って感じ。

[lainof]

↓getElementByIdを使ってもidつけた時点で汚染されてるのでは？

[mumei-0]

“setPointerCapture”

[atsushieno]

idにはID型で利用可能な文字だけが許されるべき（HTML4世代）

[tikuwa_ore]

改造したら、ブラウザ内で完結可能な簡易的な画面メモみたいなのも作れるかな、これ。とりあえずブクマ。

[iww]

勉強になった

[razokulover]

へぇ〜〜〜

[aceraceae]

てかずっと canvas 使ってたけどやっぱ svg のほうがつかい勝手いいかな

[razihai]

初耳1>命名のせいで惑わされるのわかりみが深いwこういうの一つずつ理解してくの楽しいよね、、、

[tmtms]

しらない話が多い

[todays_mitsui]

おもろい

[hokkey]

すごく参考になった。SPAばっか実装してるとブラウザAPIの知識アップデートがお留守になるなと思った

[poad1010]

この記事をおすすめしました

[Aodrey]

要素のidに$使わないでよ・・・・・・

[daruyanagi]

まず最初の件知らんかったから、わいは雑魚 ( ˘ω˘ )