要素のドラッグ&ドロップ

必要なファイル

  • jQuery
  • jQuery UI
  • jquery.ui.touch-punch.min.js
    • タブレットに対応させるためには必要

ダウンロード

サンプル

HTML

<div id="draggable">ドラッグする要素<div>
<div id="droppable">ドロップする要素<div>

JavaScript

$("#draggable").draggable({   
	revert: true	// ドラッグした要素を元の位置に戻す
});   

$("#droppable").droppable({
	drop: function() {
		// ドロップ後の処理 $(this) はドロップする要素を指す
	}
});