Movatterモバイル変換

[0]ホーム
URL:

はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数！

アプリで開く

はてなブックマーク

  • はてなブックマーク
  • テクノロジー
  • 「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
  • Twitterでシェア
  • Facebookでシェア

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

780usersがブックマークコメント53

    ガイドラインをご確認の上、良識あるコメントにご協力ください

    0/0
    入力したタグを追加

    現在プライベートモードです設定を変更する

    おすすめタグタグについて

      よく使うタグ

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

        ガイドラインをご確認の上、良識あるコメントにご協力ください

        0/0
        入力したタグを追加

        現在プライベートモードです設定を変更する

        おすすめタグタグについて

          よく使うタグ

            はてなブックマーク

            はてなブックマークで
            関心をシェアしよう

            みんなの興味と感想が集まることで
            新しい発見や、深堀りがもっと楽しく

            ユーザー登録

            アカウントをお持ちの方はログインページへ

            記事へのコメント53件

            • 注目コメント
            • 新着コメント
            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をつけた要素はグローバル変数に格納される仕様」糞仕様だね！

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

                                  2024/02/28リンク

                                  その他
                                  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”

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

                                                    2024/02/28リンク

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

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

                                                      その他
                                                      iww
                                                      勉強になった

                                                      その他
                                                      razokulover
                                                      へぇ〜〜〜

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

                                                        2024/02/28リンク

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

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

                                                          その他
                                                          tmtms
                                                          しらない話が多い

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

                                                              2024/02/28リンク

                                                              その他
                                                              todays_mitsui
                                                              おもろい

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

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

                                                                  2024/02/28リンク

                                                                  その他
                                                                  poad1010
                                                                  この記事をおすすめしました

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

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

                                                                      その他

                                                                      注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

                                                                      リンクを埋め込む

                                                                      以下のコードをコピーしてサイトに埋め込むことができます

                                                                      プレビュー
                                                                      アプリのスクリーンショット
                                                                      いまの話題をアプリでチェック！
                                                                      • バナー広告なし
                                                                      • ミュート機能あり
                                                                      • ダークモード搭載
                                                                      アプリをダウンロード

                                                                      関連記事

                                                                        usersに達しました！

                                                                        さんが1番目にブックマークした記事「「JavaScriptで要...」が注目されています。

                                                                        気持ちをシェアしよう

                                                                        ツイートする

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

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

                                                                        ブックマークしたユーザー

                                                                        • t2wave2024/11/29t2wave
                                                                        • techtech05212024/06/26techtech0521
                                                                        • qinglong2024/04/30qinglong
                                                                        • tapiokamaru3332024/03/22tapiokamaru333
                                                                        • Shinwiki2024/03/18Shinwiki
                                                                        • l-_-ll2024/03/15l-_-ll
                                                                        • va-sizuru2024/03/11va-sizuru
                                                                        • wate_wate2024/03/11wate_wate
                                                                        • lugecy2024/03/10lugecy
                                                                        • ysirman2024/03/09ysirman
                                                                        • littlefield2024/03/07littlefield
                                                                        • manhole2024/03/07manhole
                                                                        • stntaku2024/03/06stntaku
                                                                        • masakuma08122024/03/04masakuma0812
                                                                        • t_f_m2024/03/02t_f_m
                                                                        • esuji52024/03/02esuji5
                                                                        • hush_in2024/03/02hush_in
                                                                        • ayoshh2024/03/01ayoshh
                                                                        すべてのユーザーの
                                                                        詳細を表示します

                                                                        ブックマークしたすべてのユーザー

                                                                        同じサイトの新着

                                                                        同じサイトの新着をもっと読む

                                                                        いま人気の記事

                                                                        いま人気の記事をもっと読む

                                                                        いま人気の記事 - テクノロジー

                                                                        いま人気の記事 - テクノロジーをもっと読む

                                                                        新着記事 - テクノロジー

                                                                        新着記事 - テクノロジーをもっと読む

                                                                        同時期にブックマークされた記事

                                                                        いま人気の記事 - 企業メディア

                                                                        企業メディアをもっと読む

                                                                        はてなブックマーク

                                                                        公式Twitter

                                                                        はてなのサービス

                                                                        • App Storeからダウンロード
                                                                        • Google Playで手に入れよう
                                                                        Copyright © 2005-2025Hatena. All Rights Reserved.
                                                                        設定を変更しましたx
                                                                        [8]ページ先頭
                                                                        ©2009-2025 Movatter.jp