9月 252012
 
このエントリーをはてなブックマークに追加
はてなブックマーク - jQuery を用いたドラッグ&ドロップのサンプル
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

 

jQueryを用いてDrag & Dropを実装。
その際のサンプルソースを紹介します。

【 サンプルの画面 】

 Drag前  Drop後

 

実際の動きはこちらにてご確認あれ⇒ jQuery Drag & Drop のサンプル

(HTML5を使用したDrag & Dropのサンプルはこちら⇒HTML5で実装した Drag & Drop サンプル)

 

サンプルは、IE9、Chrome、FireFox9、Safari5で動作確認しました。どれも問題なく動作します。さすがjQuery様です。

 

【 ソースの紹介 】

以下のソースをコピペして自分のWebサーバにアップすれば動作します。

 

<!DOCTYPE html>  
<html lang="ja"> 
<head>
	<meta charset="UTF-8">
	<script src="http://kazefuku.net/sample/jQueryDnD/js/jquery-ui-1.8.20/jquery-1.7.2.js"></script>
	<script src="http://kazefuku.net/sample/jQueryDnD/js/jquery-ui-1.8.20/ui/jquery.ui.core.js"></script>
	<script src="http://kazefuku.net/sample/jQueryDnD/js/jquery-ui-1.8.20/ui/jquery.ui.widget.js"></script>
	<script src="http://kazefuku.net/sample/jQueryDnD/js/jquery-ui-1.8.20/ui/jquery.ui.mouse.js"></script>
	<script src="http://kazefuku.net/sample/jQueryDnD/js/jquery-ui-1.8.20/ui/jquery.ui.draggable.js"></script>
	<script src="http://kazefuku.net/sample/jQueryDnD/js/jquery-ui-1.8.20/ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="http://kazefuku.net/sample/jQueryDnD/js/jquery-ui-1.8.20/themes/base/jquery.ui.theme.css">
	<style>
		<!--

/* 大枠 */
#waku {
	width:580px;
	border-style:solid; 
	border-width:1px;
	border-color:black;
	padding: 10px;
}

/* 右枠・ドラッグ枠 */
#dragArea {
	width:255px;
	padding: 10px;
	border-style:solid; 
	border-width:3px; 
	border-color:blue;
	float:right;
}

/* divのfloatの解除用 */
.clear {
    clear:both; 
}

/* 左枠・ドロップ枠 */
#dropArea {
	padding: 10px;
	border-style:solid; 
	border-width:3px; 
	border-color:red;
	float:left;
}

/* 左枠・ドロップ枠 */
#dropArea ul {
    list-style-type: none;
    margin: 0;
    padding: 5px;
    margin-bottom: 10px;
}

#dropArea li {
    margin: 5px;
    padding: 5px;
    width: 90%;
}

#sort-drop-area {
    width: 252px;
    padding: 5px 0;
    border: 1px dashed yellow;
    border-radius: 10px;
    border-width: 3px;
}

	-->
	</style>
</head>

<body>
<div id="waku">

	<h1>Drag And Drop Sample</h1>

	<!-- Dropエリア -->
	<div id="dropArea">
		<h3>枠内に要素をドロップする</h3>
		<ul id="sort-drop-area">
			<li class="ui-state-default">
                <h3>
                   Dropエリア
                </h3>
		    </li>
		    <li class="ui-state-default">
                <h3>
					↑に要素を挿入できます
                </h3>
		    </li>
		</ul>
	</div>

	<!-- Dragエリア -->
	<div id="dragArea">
		<h3>要素をドラッグする</h3>

		●LI要素
		<ul>
		    <li id="insert-object" class="ui-state-highlight">Style有り</li>
		    <li>Style無し</li>
		</ul><br />

		●画像<br />
		<a href="http://okaidoku.net/"><img src="./images/logo.jpg"></a><br />
		<a href="http://okaidoku.net/app/"><img src="./images/jushou.png" width="150px"></a>

	</div>
	<div class="clear"></div>
</div>

<script>
	window.onload = function() {

		// 
	    jQuery( '#sort-drop-area' ) . sortable( {
	            revert: true
	    } );

	    // 
	    jQuery( '#dragArea' ).find('img,li').draggable( {
	        connectToSortable: '#sort-drop-area',
	        helper: 'clone',
	        revert: 'invalid',
	    } );

	    // 
	    jQuery( '#dragArea' ) . disableSelection();
	}		

</script>

</body>
</html>

 

【 ソースの説明 】

 

 ①jQueryで使用する、Jsファイル、Cssファイルをインクルードする。

・6ファイルのJsファイルをインクルードします。

jQuery UIのサイトから、jQueryのプラグインをダウンロードしWebサーバにアップします。  jQueryの本体(jquery-1.7.2.js)、jQuery UIの5ファイル(jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.mouse.js、jquery.ui.sortable.js、jquery.ui.draggable.js)をインクルードします。

・jQuery UI用のCSSファイル(jquery.ui.theme.css) をインクルードします。

 

②Dropエリアの説明

 

ui-state-defult Classは、jQuery UIのスタイルシート内(jquery.ui.theme.css)で設定されています。

 

③Dragエリアの説明

 

・Dragエリアには、Li要素とImg要素を配置しています。

・Li要素の“Style有り”に設定しているui-state-highlight のClassは、jQuery UIのスタイルシート内(jquery.ui.theme.css)で設定されています。

 

④JavaScriptの記述

 

 

凄いですね、こんな短いコードでドラッグ&ドロップは実装できるのですね。上記コードを簡単に説明。

 

・115~131行 : Window.Onloadで、ページ読み込み完了時に発生するイベントハンドラを指定しています。(慣れでWindows.onloadと書いていますが、jQury(document).ready で呼び出す方が良いです ⇒ window.onload とjQury(document).ready の違い)

・118~120行 : sortableメソッドで、ID sort-drop-area にあるエリアにある要素をSort可能にしています。sortableメソッドで使用できるオプション、revert ではドラッグヘルパーが所定の場所にスムースにスライドして収めるアニメーション効果を演出しています。 このオプションをfalseにすると、素早くスナップされます。

・123~127行 : draggableメソッドで、セレクタでdragAreaにあるImage要素とLi要素のみドラッグ可能にしています。(他の要素はドラッグできません。) connectTosortableオプションは、sortbleメソッドを使用する際に必要です。ドロップ・ソートエリアを指定します。helperオプションは、ドラッガブル要素のコピーが作成されます。connectTosortableオプション使用時は、helperはcloneを指定する必要があるようです。revert オプションをinvalidにする事により、ドロップエリア上にドロップされなかった場合に要素が元の位置に戻ります。(trueを指定すると、要素がパッと消えるようなアニメーションになります。) 沢山ありすぎて紹介できませんので、詳しいオプションは本家サイトでご確認を ⇒ 本家

・130行     : disableSelectionメソッドで、dragArea内で文字などの要素を選択出来ないようにしています。 意味がわからない方はこちらの説明をどうぞ。

 

ざっとこんな感じですね。さすがjQuery様です。

jQuery ドラッグ&ドロップの詳しいメソッド、オプションを知りたい方は以下の本をお勧めします。調べたところ、どの本よりも詳しくドラッグ&ドロップの事が載っていますよ。

 

 

【 その他、検証したサンプル達 】

HTML5で実装した Drag & Drop サンプルソース

 

【 参考になるページ 】

jQuery Ui Draggable 

jQuery Ui Droppable

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

 

 


 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player