初めてiGoogleを見た時に感動した
ドラッグできるコンテンツ、jQueryの
普及で今や身近なものになっています。
WordPressも2.7になってからコンテンツの
ドラッグが可能ですし、様々なWebサービス
でも見かけるようになりました。そんな
ドラッグやドロップを実装できるjQueryプラグインを
まとめてみます。
こういったjsも道具である以上、使い方次第ではユーザビリティ向上にも繋がりますが損ねる事もあるかと思いますので、サイトにあわせて利用したいですね。
prettySociable jQuery plugin
ドラッグ→リンク先を共有出来るサービス等に投稿するjQueryプラグイン。マウスオーバーするとコメントが出ますのでドラッグすればオーバーレイ状態になり、投稿先にドロップすればシェアできます。
PNGの透過バグのあるIE6対策のjsも同梱されています。試しに入れてみました。以下のリンクでお試し下さい。正式導入では無いのでアイコンやテキストは適当です。
追記・※テストは終了しました。
ドラッグ可能なjQueryプラグインいろいろ
また、以下のようにドラッグした際に表示されるテキストの変更も可能です。
rel属性をカスタムするとドラッグした時のテキストを変更できます。
導入チュートリアル
対応ブラウザはIE6以上、Firefox2.0以上、Safari 3.1.1以上、Opera 9以上との事です。Google Chromeでも動作を確認しました。ただ、僕がこのページを確認した時はIE6では動作しませんでした。DL先のデモページでは動作を確認しています。何が原因かは探っていません。
prettySociable jQuery pluginをダウンロードしてjquery.prettySociable.jsの内容を変更します。最初に用意されているシェアサービスは全部海外のサイトなので１つだけはてブ入れました。記述は以下。13行目～58行目あたりまでが変更箇所です。
(function($) {
$.prettySociable = {version: 1.0};
$.prettySociable = function(settings) {
$.prettySociable.settings = jQuery.extend({
animationSpeed: 'fast', /* fast/slow/normal */
opacity: 0.90, /* Value between 0 and 1 */
share_label: 'このリンクをドラッグしてシェア！', /* Text displayed when a user rollover an item */
share_on_label: '投稿先： ', /* Text displayed when a user rollover a website to share */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettySociable */
hover_padding: 0,
websites: {
facebook : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'はてブ',
'url': 'http://b.hatena.ne.jp/my/add.confirm?url=',
'icon':'images/hatena.png',
'sizes':{'width':70,'height':70}
},
twitter : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Twitter',
'url': 'http://twitter.com/home?status=',
'icon':'images/twit.png',
'sizes':{'width':70,'height':70}
},
delicious : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Delicious',
'url': 'http://del.icio.us/post?url=',
'icon':'images/deli.png',
'sizes':{'width':70,'height':70}
},
//追加可能
},
tooltip: {
offsetTop:0,
offsetLeft: 15
},
popup: {
width: 900,
height: 500
},Facebookが有った所をはてブに変更。個別に非表示にしたい場合は’encode’:true, を’encode’:false,にします。 サービスを増やしたい時は
example : {
'active': true,
'encode':true, // 非表示にする場合はfalse
'title': 'share_on_labelに続くテキスト',
'url': 'ソーシャルサービスの投稿用URL。',
'icon':'表示するアイコン画像のURL',
'sizes':{'width':アイコンの幅,'height':高さ}
},上記のような記述を「//追加可能」の部分に加えるだけです。続いてhead部分に以下を記述。jsファイルやcssファイルのURLはサイトにあわせて変更します。
<script type="text/javascript" src="../js/jquery.js" charset="utf-8"></script> <script src="../js/jquery.prettySociable.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="../css/prettySociable.css" type="text/css" media="screen" charset="utf-8" />
IE6はPNG透過のバグがあるので同梱されているDD_belatedPNG.jsを適応させる為に以下も加えます。
<!--[if lte IE 6]><script src="js/DD_belatedPNG.js" type="text/javascript" charset="utf-8"></script><![endif]-->
続いてbodyの閉じタグより前に以下を追加。
<script type="text/javascript" charset="utf-8"> // Init prettySociable $.prettySociable(); </script>
変更したらアップロードし、同梱されているcssやjs、イメージファイルもアップロードします。イメージファイルの置き場所にあわせてcssも変更してくださいね。
最後に適応させたいアンカータグに以下のようにrel属性を加えます。
<a rel="prettySociable" href="http://kachibito.net/web-design/drag-jquery-plugins.html" >ドラッグ可能なjQueryプラグインいろいろ</a>rel=”prettySociable”のみの追加だと、そのページのタイトルを拾いますが、以下のように変更も出来ます。
<a rel="prettySociable;title:ドラッグ時のタイトル;excerpt:その下に表示される説明文;" href="http://kachibito.net/web-design/drag-jquery-plugins.html">ドラッグ可能なjQueryプラグインいろいろ</a>
完了です。以下を参考にしました。DLページもリンク先から飛べます。
カッコいいし、SBMの投稿ボタンをサイト内から無くせますが、分かり難い、リンク先に飛びたいだけなのに邪魔、という弊害も予想されます。
以下のその他のデモはリンク先でご確認下さい。
Collapsible Drag & Drop Panels
iGoogleやWPの管理画面でコンテンツをドラッグ＆ドロップで移動可能にするjQueryプラグイン。
Drag & Drop with PHP & jQuery
liタグで実装されたコンテンツを移動→移動後にコメントを出せるjQueryプラグイン。PHPとjQueyで実装、MySQLにテーブルも必要です。SQLファイルが同梱されていますのでそのファイルを実行してテーブルを作成してから利用するみたいですね。
jqDnR
コンテンツをドラッグして移動、Boxの幅も可変式に出来るJQueryプラグイン。動きも凄く滑らか。
Drag to Share
最初分からなくて戸惑いましたが、画像にマウスオーバーするとヘルプバルーンが出現、ドラッグするとオーバーレイ、シェアしたいサービスにドロップするようです。冒頭に挙げたプラグインと似たようなプラグインですね。画像とか写真がメインコンテンツのサイトによさ気でしょうか。
$.event.special.drag
ドラッグ＆ドロップで出来る色々な動きを紹介しています。通常移動、横移動に制限、px単位で移動、boxのヘッド部分のみマウスを効かせるにする、移動中はカラー変更、半透明のboxの移動場所を指定してから時間差移動、指定したサークル（円）上のみ移動可能など７つ。
$.event.special.drop
Div要素を移動→コンテンツに加える事が可能なjQueryプラグイン。
Table Drag and Drop JQuery plugin
テーブル内でドラッグ＆ドロップを可能にするjQueryプラグイン。見出しなどもドラッグできるといろいろ応用利きそうですね。
EasyDrag jQuery Plugin
どんなDOM要素もほぼドラッグ＆ドロップが可能だそう。シンプルなので応用もアイデア次第でしょうか。
Interface drag and drop com jQuery
こちらもコンテンツのドラッグ＆ドロップを実装するjQueryプラグインですが、英語ではないので訳せない・・・
Plugins: Drag-and-Drop
デモが無いプラグインもありますが、３４個揃っています。上図はmapbox。
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
複数選択し、ドロップ可能なjQueryプラグインの導入チュートリアル記事。
これより以下はInterface elements for jQueryにあるjQueryプラグインのサンプルです。ダウンロードは個別で出来るみたいですが、動かないので左サイドから一括DLしてその中から使うようになります。ソースコードと使うjQueryプラグインはサンプルページのソースをご参照下さい。
cart
これは凄いですね。商品を右側のYour cartにドラッグ＆ドロップすると加算されます。ちょっと挙動は怪しいです。
drag
コンテンツを色々な動作でドラッグできるサンプル。
drag_drop_tree
ツリー状のメニューをドラッグ＆ドロップ。
drag_vr
サークル上でドラッグし、パノラマ写真を流すように見る事が出来ます。画像内にはリンクも。
drop
ドラッグしたコンテンツをドロップした場所のカラーが変わる。
sort
iGoogleのようにコンテンツを動かせます。
sort_floats
サンプルはjQueryプラグインを使ったパズル。ドラッグ＆ドロップで絵を正しいものにします。
sort_lists
list要素をドラッグで順序変更できます。
sort_tabs
ドラッグでタブを移動。
以上です。探せばまだまだありそうです。必要性の有無はそのサイトに依存しそうです。