タグ

Javascriptとドラッグに関するrizmhateのブックマーク (2)

  • テーブルのセルをドラッグで選択する方法【JavaScript】 - Programming Magic

    JavaScriptを使えばテーブルのセルをドラッグで選択するようなインターフェースを作ることもできる。 Google カレンダーでは、それをうまく利用し、ユーザに簡単な操作でわかりやすく特定の期間(2日の3時~9時など。)を選択させている。 テーブルのセルをドラッグで選択するサンプル テーブルのセルをドラッグで選択するには、ドラッグを開始した位置にあるセルと現在の位置にあるセルを取得し、マウスの動きに合わせてセルの色を変更すればいい。 まず、セルの選択をさせるtableのonMouseDownイベントで以下のような関数を呼び、ドラッグを開始したセルを保存する。 var startCell = null; // マウスダウンのイベント処理 function mouseDown(table, e){ if (!e) var e = window.event; startCell = e.sr

  • HTML Element をドラッグで移動可能にする JavaScript ライブラリ

    概要 ドラッグで Element を移動できるようにする JavaScript ライブラリです。 ダウンロード 下記リンクを右クリックしてファイルを保存してください。 ElementMover ver.1.0 (update to ver.1.0.1 at 2010-03-27 JST) 使用方法 まず、上記リンクからダウンロードしたスクリプトファイルを HTML 文書内で読み込みます。 head 要素内 ではなく body 要素を閉じる直前に script 要素を置いて読み込んでください。 ドラッグにより移動可能にしたい要素の class 属性に "movable" または "movable_rel" を追加してください。 それだけでその要素はドラッグによる移動が可能になります。 なお、指定した class が "movable" の場合は CSS の position プロパティが "

  • 1