今、空のウェブページにアイコンをdrag & drop してページを作れるような、ありがちなUIを作っているのですが、
その際にjQueryUIというライブラリのdraggable, droppableがスゲー便利＆すげー楽しかったのでご紹介です。
元のドキュメントはこちら。
[draggable]
http://jqueryui.com/demos/draggable/
[droppable]
http://jqueryui.com/demos/droppable/
また、存在にずっと気づかなかったので上記の英語版のドキュメントを読んでいたのですが、
日本語に訳していただいたものもあるようです。
http://stacktrace.jp/jquery/ui/interaction/draggable.html
http://stacktrace.jp/jquery/ui/interaction/droppable.html
で、ドキュメントのサンプルで遊んでいただければ分かる通り、
簡単にdrag & drop が可能なオブジェクトを作ることができるメソッドなのですが、
素晴らしいのがオプションの充実っぷり。
やたら細かいところまで設定できます。
その中でこれはあってよかったなーというものをご紹介。
まずは、draggable の helperオプションです。
original または clone から選べます。
これだけだと単に見た目の違いっぽいのですが、
「元のobjectを動かす」のか「cloneを作ってそちらを動かすのか」で大きく違う場合があります。
それがこういうケースです。
青い方は箱から出れず、赤い方はでられる、というのがわかりますでしょうか？
このようにスクロール可能な箱の中にdoraggableがある場合、helperがcloneでないと出すのが大変です。
はじめはこれに気づかず、dragと同時に外側のdivのoverflowをvisibleにする、といったこともしていたのですが、
それはそれで諸々ずれて大変でした。
とりあえず今日はここまで。
続きはまた別途書きたいと思いますー
このページのソースコード
<div style="border-style: solid; border-color: #606060; overflow: scroll; height: 200px;">
<div id="draggable3" style="width: 50px; height: 50px; background-color: #ccffff;">helper:original</div>
<div id="draggable4" style="width: 50px; height: 50px; background-color: #ffcccc;">helper:clone</div>
</div>
<script type="text/javascript">// <![CDATA[
$(function() {
$( "#draggable3" ).draggable({helper: 'original', opacity: 0.75});
$( "#draggable4" ).draggable({helper: 'clone', opacity: 0.75});
});
// ]]></script>
[次回ネタメモ]
- iframeFixオプション はフレームがあるページでは必須
- iframe内のコンテンツにドロップする方法
- scrollオプションはちょっとイケてなかったので自作