Skip to content

Instantly share code, notes, and snippets.

@danimal141
Created February 23, 2013 06:32
Show Gist options
  • Save danimal141/5018718 to your computer and use it in GitHub Desktop.
Save danimal141/5018718 to your computer and use it in GitHub Desktop.
drag and drop elements.
<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