Created
February 23, 2013 06:32
-
-
Save danimal141/5018718 to your computer and use it in GitHub Desktop.
drag and drop elements.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>ドラッグアンドドロップサンプル</title> | |
<style type="text/css"> | |
.draggable {width: 60px; height: 30px; line-height:30px; margin: 10px; float: left; | |
text-align: center; background-color: blue; color: white;} | |
.droppable {width: 250px; height: 250px; padding:50px; margin-left:50px; border: inset 5px red; float: left;} | |
</style> | |
</head> | |
<body> | |
<div draggable="true" class="draggable">山田さん</div> | |
<div draggable="true" class="draggable">田中さん</div> | |
<div draggable="true" class="draggable">山本さん</div> | |
<div id="target" class="droppable">Drop here</div> | |
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> | |
<script src="http://borismoore.github.com/jsrender/jsrender.js"></script> | |
<script type="text/javascript"> | |
$(".draggable").on("dragstart", function(event){ | |
//dataTransferオブジェクトのsetDataメソッドでドラッグするデータをセット | |
event.originalEvent.dataTransfer.setData("Text", $(this).text()); | |
}) | |
$("#target").on("dragover", function(event){ | |
//デフォルトのイベントを無効にする | |
event.preventDefault(); | |
}) | |
$("#target").on("drop", function(event){ | |
//デフォルトのイベントを無効にする | |
event.preventDefault(); | |
var data = event.originalEvent.dataTransfer.getData("Text"); | |
$(this).html($("#data").render({data:data})); | |
}) | |
</script> | |
<script id="data" type="text/x-jsrender"> | |
<p>おーーっと{{:data}}がドラッグアンドドロップされましたよー</p> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment