<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> <!--<script type="text/javascript" src="jquery.ui.core.js"></script>--> <script type="text/javascript" src="jquery.ui.draggable.js"></script> <script type="text/javascript"> $(function(){ $("input:eq(0)").click(function(){ $("div#ex1").draggable({ cursor:"move" }); }); $("input:eq(1)").click(function(){ $("div#ex1").draggable("destroy"); }); $("input:eq(2)").click(function(){ $("div#ex1").draggable("enable"); }); $("input:eq(3)").click(function(){ $("div#ex1").draggable("disable"); }); }); </script> <style type="text/css"> div.content{ margin:3px } div#ex1{ width:100px; height:100px; background-color:#FFCC99; } .ui-draggable{ } .ui-draggable-disabled{ } </style> </head> <body> <div id="ex1"><div class="content">ドラッグされる要素</div></div> <input type="button" value="要素を並べ替えられるようにする"> <input type="button" value="draggableを解除する"> <input type="button" value="draggableを有効にする"> <input type="button" value="draggableを無効にする"> </body> </html>