ドラッグやドロップを実装するjQueryプラグインいろいろ

スポンサーリンク

drag-drop-jquery
初めてiGoogleを見た時に感動した
ドラッグできるコンテンツ、jQueryの
普及で今や身近なものになっています。
WordPressも2.7になってからコンテンツの
ドラッグが可能ですし、様々なWebサービス
でも見かけるようになりました。そんな
ドラッグやドロップを実装できるjQueryプラグインを
まとめてみます。

こういったjsも道具である以上、使い方次第ではユーザビリティ向上にも繋がりますが損ねる事もあるかと思いますので、サイトにあわせて利用したいですね。

prettySociable jQuery plugin

drag-drop-jquery10

ドラッグ→リンク先を共有出来るサービス等に投稿する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の内容を変更します。最初に用意されているシェアサービスは全部海外のサイトなので1つだけはてブ入れました。記述は以下。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ページもリンク先から飛べます。

prettySociable jQuery plugin

カッコいいし、SBMの投稿ボタンをサイト内から無くせますが、分かり難い、リンク先に飛びたいだけなのに邪魔、という弊害も予想されます。

以下のその他のデモはリンク先でご確認下さい。

Collapsible Drag & Drop Panels

drag-drop-jquery01
iGoogleやWPの管理画面でコンテンツをドラッグ&ドロップで移動可能にするjQueryプラグイン。

Collapsible Drag & Drop Panels

Drag & Drop with PHP & jQuery

drag-drop-jquery02
liタグで実装されたコンテンツを移動→移動後にコメントを出せるjQueryプラグイン。PHPとjQueyで実装、MySQLにテーブルも必要です。SQLファイルが同梱されていますのでそのファイルを実行してテーブルを作成してから利用するみたいですね。

Drag & Drop with PHP & jQuery

jqDnR

drag-drop-jquery03
コンテンツをドラッグして移動、Boxの幅も可変式に出来るJQueryプラグイン。動きも凄く滑らか。

jqDnR

Drag to Share

drag-drop-jquery04
最初分からなくて戸惑いましたが、画像にマウスオーバーするとヘルプバルーンが出現、ドラッグするとオーバーレイ、シェアしたいサービスにドロップするようです。冒頭に挙げたプラグインと似たようなプラグインですね。画像とか写真がメインコンテンツのサイトによさ気でしょうか。

Drag to Share

$.event.special.drag

drag-drop-jquery05
ドラッグ&ドロップで出来る色々な動きを紹介しています。通常移動、横移動に制限、px単位で移動、boxのヘッド部分のみマウスを効かせるにする、移動中はカラー変更、半透明のboxの移動場所を指定してから時間差移動、指定したサークル(円)上のみ移動可能など7つ。

$.event.special.drag

$.event.special.drop

drag-drop-jquery06
Div要素を移動→コンテンツに加える事が可能なjQueryプラグイン。

$.event.special.drop

Table Drag and Drop JQuery plugin

drag-drop-jquery07
テーブル内でドラッグ&ドロップを可能にするjQueryプラグイン。見出しなどもドラッグできるといろいろ応用利きそうですね。

Table Drag and Drop JQuery plugin

EasyDrag jQuery Plugin

drag-drop-jquery08
どんなDOM要素もほぼドラッグ&ドロップが可能だそう。シンプルなので応用もアイデア次第でしょうか。

EasyDrag jQuery Plugin

Interface drag and drop com jQuery

drag-drop-jquery09
こちらもコンテンツのドラッグ&ドロップを実装するjQueryプラグインですが、英語ではないので訳せない・・・

Interface drag and drop com jQuery

Plugins: Drag-and-Drop

drag-drop-jquery20
デモが無いプラグインもありますが、34個揃っています。上図はmapbox。

Plugins: Drag-and-Drop

jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ

drag-drop-jquery21
複数選択し、ドロップ可能なjQueryプラグインの導入チュートリアル記事。

jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ


これより以下はInterface elements for jQueryにあるjQueryプラグインのサンプルです。ダウンロードは個別で出来るみたいですが、動かないので左サイドから一括DLしてその中から使うようになります。ソースコードと使うjQueryプラグインはサンプルページのソースをご参照下さい。

cart

drag-drop-jquery11
これは凄いですね。商品を右側のYour cartにドラッグ&ドロップすると加算されます。ちょっと挙動は怪しいです。

cart

drag

drag-drop-jquery12
コンテンツを色々な動作でドラッグできるサンプル。

drag

drag_drop_tree

drag-drop-jquery13
ツリー状のメニューをドラッグ&ドロップ。

drag_drop_tree

drag_vr

drag-drop-jquery14
サークル上でドラッグし、パノラマ写真を流すように見る事が出来ます。画像内にはリンクも。

drag_vr

drop

drag-drop-jquery15
ドラッグしたコンテンツをドロップした場所のカラーが変わる。

drop

sort

drag-drop-jquery16
iGoogleのようにコンテンツを動かせます。

sort

sort_floats

drag-drop-jquery17
サンプルはjQueryプラグインを使ったパズル。ドラッグ&ドロップで絵を正しいものにします。

sort_floats

sort_lists

drag-drop-jquery18
list要素をドラッグで順序変更できます。

sort_lists

sort_tabs

drag-drop-jquery19
ドラッグでタブを移動。

sort_tabs

以上です。探せばまだまだありそうです。必要性の有無はそのサイトに依存しそうです。

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services