danimal141 · February 23, 2013 06:32
diff --git a/drag_and_drop_sample.html b/drag_and_drop_sample.html
 <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>
	<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>