備忘録です．
前回書いたjQuery UI の draggable とHTML5のDrag Drop API を組み合わせてみたいと思います．
今回はドラッグ可能な要素を下のエリアにドロップすると，
ドラッグエリア上で自由に動かせる要素が新しく出来上がるといったサンプルプログラムを書いてみたいと思います．
環境
- MacOSX (10.9)
- jQuery UI (1.11.0)
- jQuery (1.10.2)
サンプル
上部の要素を下部のエリアにドラッグ＆ドロップすると自由に動かせる要素が下部のエリアにできます．
作った要素はダブルクリックで削除することができます．
ddSample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>drag and drop test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./jquery-ui-1.11.0/jquery-ui.css">
<link rel="stylesheet" href="./css/ddStyle.css">
</head>
<body>
<div id="container">
<div id="dragTargetsArea">
<p class="dragTarget" draggable="true">drag me.</p>
<p class="dragTarget" draggable="true">drag drag!</p>
</div>
<div id="draggableArea">
</div>
</div>
<script src="./jquery-ui-1.11.0/external/jquery/jquery.js"></script>
<script src="./jquery-ui-1.11.0/jquery-ui.js"></script>
<script src="./js/ddEvent.js"></script>
</body>
</html>
ddStyle.css
body {
width: 940px;
height: 100%;
margin: 0 auto;
padding: 0;
}
div#draggableArea {
width: 100%;
height: 300px;
border: solid 1px #000;
}
div.draggable {
width: 20%;
height: 10%;
}
ddEvent.js
$(function() {
$('.draggable').draggable( {
containment: '#draggableArea',
scroll: false,
});
$('.dragTarget').on('dragstart', function(e) {
// this は p.dragTarget のうち今ドラッグしてるもの
dragSrcEl = this;
console.log(this);
});
// ドラッグエリアに要素を追加，ドラッグエリアから要素をダブルクリックで削除
$('#draggableArea').on('dragover', function(e) {
e.preventDefault();
}).on('drop', function(e) {
if( !(e.isDefaultPrevented()) ) {
e.stopPropagation();
}
if(dragSrcEl != this) {
// this は div#draggableArea
$('#'+this.id).append("<div class='draggable'><p>"+dragSrcEl.innerText+"</p></div>");
}
$('.draggable').each(function() {
$(this).draggable( {
containment: '#draggableArea',
scroll: false,
});
});
}).on('dblclick', '.draggable', function(e) {
$(this).remove();
});
});
自由に動かせるようになったでしょうか．
今回はこちら http://www.html5rocks.com/ja/tutorials/dnd/basics/ を参考にしました．
ひとこと
最近，調べて書き終わったら，調べてたタブを閉じる前にきーたに書き留める習慣がつきました．
きーたのひとありがとうございます．