<!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.sortable.js"></script> <script type="text/javascript"> $(function(){ $("input:eq(0)").click(function(){ $("ul#webtech").sortable({ //ドラッグによる移動が可能な方向("x"なら横方向のみ、"y"なら縦方向のみ) axis:"x" }); }); $("input:eq(1)").click(function(){ $("ul#webtech").sortable("destroy"); }); $("input:eq(2)").click(function(){ $("ul#webtech").sortable("enable"); }); $("input:eq(3)").click(function(){ $("ul#webtech").sortable("disable"); }); }); </script> <style type="text/css"> /*初期デザイン*/ ul#webtech{ border:1px solid #CCCCCC; padding:20px; background-color:#CCCCCC; } ul#webtech li{ display:inline; border:2px dashed #CCCCCC; width:150px; height:30px; line-height:30px; margin:5px; padding-left:10px; color:#CCCCCC; background-color:#EEEEEE; } .ui-sortable{ cursor:move; background-color:#EEEEEE !important; } .ui-sortable li{ color:#000000 !important; border:2px dashed #FF0000 !important; } .ui-sortable-disabled{ cursor:auto; background-color:#CCCCCC !important; } .ui-sortable-helper{ cursor:pointer; background-color:#FFCC99 !important; } </style> </head> <body> <ul id="webtech"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Webサーバー</li> </ul> <input type="button" value="要素を並べ替えられるようにする"> <input type="button" value="sortableを解除する"> <input type="button" value="sortableを有効にする"> <input type="button" value="sortableを無効にする"> </body> </html>