【JS】ドラッグアンドドロップでHTML要素の位置を移動させる jQuery JavaScript ... jQuery拡張(プラグイン)

ドラッグでHTML要素の位置を移動させるmousemove(touchmove)イベントを使って、HTML要素のドラッグによる位置の移動を実装します。※ブラウザによっては正常に動作しない可能性があります。移動可能にする...移動不可能にする(クラスの切り替え)...jQuery 拡張版...jQuery.prototype.movable...要素の移動処理をjQueryのメソッドとして拡張し、引数にはタップ開始時、移動時、移動終了時のコールバック関数を用意しました。...補足move後のクリック無効は、リンクなどが設定されている要素の移動後のイベント(リンク先に飛ぶなど)を発生させないためです。

【javascript】要素の範囲外をクリックした時の処理を実装する .closest()

JavaScriptで特定要素の領域外をクリックしたときのイベント処理です。 特定要素外のクリックイベント※当処理では、jQueryを使用しています。closestメソッドを使用して、特定要素外のクリックを判断します。 メニューバーをイメージしたデモです。対象要素のクリックで開く処理を行い、要素の領域外のクリックで閉じます。

ワンクリックでテキストをコピーする方法-PC・スマホ対応【JavaScript】追記：iOSでズーム,拡大させない

JavaScript - コピー方法 DEMO 入力欄 入力欄以外 コード 例 PC・スマホでJavaScriptを使用してクリップボードにHTMLのテキストをコピーする方法です。 JavaScript - コピー方法 DEMO 入力欄 textarea sample text 112358130000000 copy copy 貼り付け用 入力欄以外 p sample text copy 貼り付け用 div sample text copy 貼り付け用 コード function copy(id) { var copyText = document.getElementById(id); va…

【手順あり】はてなブログのカテゴリー・パンくずをコピペで簡単に階層化表示にする「スマホも簡単」 はてなブログカスタマイズ 階層化カテゴリー

はてなブログのカテゴリー・パンくずリストの表示を階層化表示にカスタマイズするには、「階層化表示にするための処理の追加」と「階層カテゴリーの入力」の2つの作業が必要です。外部ファイルの読み込みによる方法と、コードを埋め込む方法...読み込む必要のあるファイルは2つ..階層化させるカテゴリーリストの指定や、パンくずリストのオプションを指定することができます。コードを書き換えることで、パンくずリストの区切り文字などを変更できます。...スマホのブラウザからの場合PC版表示に切り替えることでスマホからでもコードを記述することができます。...「-」(半角ハイフン)を区切り文字と認識し、階層化を行います。...折りたたみ機能も備わっているためクリック(タッチ)により下層のカテゴリーが表示されます。...Googleにパンくずリストを認識させることができるので検索結果にパンくずリストを表示することができます。