[B! DragAndDrop] hoge_systemzのブックマーク

ドラッグを必要とする様々なUI実装に使える「Dragdealer JS」:phpspot開発日誌

Dragdealer JS ドラッグを必要とする様々なUI実装に使える「Dragdealer JS」。マウスを使ったドラッグ＆ドロップ操作というのは、スクロールバーや、スライダー等色々と存在しますが、そういった処理を一手に引き受けてくれるライブラリのご紹介です。要素を動かした後のコールバック関数が指定できるので、ドラッグ＆ドロップ後の処理が自由に記述できてアイデア次第ではなかなか便利なUIが作れそうです。横スライダー縦スライダーで文字サイズを変更するサンプル横スライダーで文字サイズを変更するサンプルドラッグで移動させるスライドショー予め用意されているUI実装をするのもよいですが、ドラッグ＆ドロップに関する新しいUIを思いついた場合にも参考にしてみるとよさそう。関連エントリ IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」

hoge_systemz 2010/06/16

リンク

要素のドラッグ＆リサイズを可能にするJS「DragResize」:phpspot開発日誌

DragResize - TwinHelix This is an easy means of adding drag and resize capability to elements on your webpage.要素のドラッグ＆リサイズを可能にするJS「DragResize」。次のように、ボックスをクリックするとつまみが現れて、リサイズでき、かつドラッグ＆ドロップも可能なエレメントが作成できます。依存ライブラリが無く、ライブラリ自体が3KBという軽さなので、ちょっとウィンドウだけ実装したいんだけど、という場合に非常に使えそうです。関連エントリブロック要素のリサイズやドラッグを可能にするjQueryプラグイン「jqDnR」ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」

hoge_systemz 2008/04/20

リンク

ブロック要素のリサイズやドラッグを可能にするjQueryプラグイン「jqDnR」:phpspot開発日誌

jqDnR :: Minimalistic Drag'n'Resize for jQuery jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. ブロック要素のリサイズやドラッグを可能にするjQueryプラグイン「jqDnR」。 1. 赤の領域をドラッグして自由にリサイズできる要素作成 2. ドラッグ移動できる要素を作成 3. 赤いバーでドラッグ移動し、右下の赤いつまみでリサイズするボックスの作成プラグイン自体が972バイトしかなくて、jQueryとあわせてもとても軽いですね。ＣＳＳでスタイルすれば、当然、もっと綺麗なＵＩで提供できます。関連エントリ要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」

hoge_systemz 2008/03/08

リンク

miya2000の日記 - これからドラッグ＆ドロップを書く人のために

2012/07/22 追記久しぶりに確認したところ、IE9 では以下で指摘している IE (このときは IE6 でした) の問題(3, 4, 6)がすべて解消されていました。また、Firefox での問題(5)も Firefox14 で試したらは解消されていました(ただ、All-in-One Sidebar のパネルの上では mousemove イベントが発生しないようでした)。 Chrome20 や Safari5 でも問題無く動作していますから、現在においてドラッグ＆ドロップを実装するには mousedown 時の preventDefault() だけでOKと言えそうです。すばらしいですね！ safari で動かないらしいのでどなたか情報ください！(くやしい!) というかこういうのに勝ち負けはないので実装できてる方は是非トラックバックお願いします。当方既に ipod 中毒ですし

hoge_systemz 2007/03/08

リンク

JavaScript++かも日記 - 1997年からの

Testnetがアップデートされたのは知ってたけれど、libra-authのデモも動かなくなったのでちょっと調…

hoge_systemz 2006/12/20

リンク

JavaScript: DHTML Library, Drag & Drop for Images and Layers

hoge_systemz 2006/12/06

リンク

ドラッグ＆ドロップが簡単に出来るJavaScriptライブラリまとめ:phpspot開発日誌

Ajax Digest // Drag&drop javascript libraries review ドラッグ＆ドロップが簡単に出来るJavaScriptライブラリまとめ。 DHTML Goodies デモ DOM Drag デモ Walterzorn Drag&Drop デモ X Library デモ Drag-and-Drop extension for Prototype デモ Toolman DHTML デモ Rico デモ DragLib デモ Yahoo User Interface Library デモ script.aculo.us JavaScriptのライブラリは単純に機能がいいというだけではなく、動作の軽さ、ファイルサイズの軽さも気になる点ですね。それぞれに性質があって出来る/出来ないことがあったり、コーディング方式が自分のスタイルにあっているとかもあって選択肢

hoge_systemz 2006/09/26

リンク

GIGAZINE - ドラッグ＆ドロップできるAJAXフォルダツリー

フォルダアイコンをマウスでドラッグ＆ドロップすることで、好きな場所に入れ替えることができるというAJAXです。なかなか面白い。まずはデモ画面、こんな感じです。 Folder tree with Drag and Drop capabilities Demo ご丁寧なことに、フォルダの仮想のアイコンも一緒に移動させることができます。エクスプローラの操作感覚を再現しています。スクリプト自体はこちらから。 Folder tree with Drag and Drop capabilities