Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQuery UI Droppable

jQuery UI

今回は、jQuery UIの「Droppable」について書きます。


Droppableは、簡単に言いますと、ドラッグ＆ドロップのことです。

このように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery ui</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
	
	<div class="box">box</div>
	<div class="target_box">target_box</div>

<style>
.box{
	width: 50px;
	height: 50px;
	background: red;
	margin-bottom: 30px;
}

.target_box{
	width: 100px;
	height: 100px;
	background: green;
}

</style>

<script>
$(function(){
	$('.box').draggable();
	$('.target_box').droppable({
		accept:  '.box',
		drop:  function(event,e){
			alert('drop!');
		}
	});
});
</script>
</body>
</html>

実行結果①
f:id:gupuru:20140208022651p:plain

実行結果②
f:id:gupuru:20140208022702p:plain

上のプログラムは、赤いボックス（box）を緑のボックス(target_box)にドラッグ＆ドロップすると、アラートが表示されるものです。

こちらがjQueryの部分です。ここで、ドラッグ＆ドロップについて書いています。

$(function(){
	$('.box').draggable();
	$('.target_box').droppable({
		accept:  '.box',
		drop:  function(event,e){
			alert('drop!');
		}
	});
});

まず、ドラッグするほうに、draggable()を指定します。
そして、ドロップされるほうには、droppableを指定します。

「accept: '.box',」は、「.box」のみに反応するという設定です。別のモノをドロップしても反応しません。
f:id:gupuru:20140208023416p:plain
（新しく作ったbox2だと、ドラッグ＆ドロップしても、反応しません。）

最後の、

drop:  function(event,e){
			alert('drop!');
		}

ここで、ドロップされた時の処理を書いています。今回は、アラートを表示するだけです。

参考サイト
https://jqueryui.com/droppable/#default