①、②、③、④という数字を画面上に表示し入れ替えることが出来るプログラムを作成しています。
ほぼ完成に近い状態なのですが、sortableがうまく機能しません。
おそらく、positionで位置を固定していることが問題かとは思います。
実際、位置固定をしない場合は入れ替えが可能でした。
(しかし、入れ替える度に数字の隣感覚がずれてしまうため固定しました)
最近、jqueryを使いはじめたので勉強不足もございます。
下記に作成途中のプログラムを記載します。
問題点、解決方法をご教授頂けると幸いです。
よろしくお願いします。
HTML
1<!DOCTYPE HTML> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数字場所移動</title> 6 <style> 7 body{ 8 background-color:black; 9 color:#FFF; 10 text-align:center; 11 font-size:70px; 12 } 13 #stage{ 14 margin:10px 0; 15 padding:0; 16 } 17 #stage > li{ 18 width: 100px; 19 list-style:none; 20 margin:7px; 21 border:2px solid #fff; 22 height:100px; 23 } 24 #sortarea{ 25 position:relative; 26 width: 600px; 27 height: 120px; 28 padding: 5px; 29 margin-left:280px; 30 border-style: dashed; 31 border-radius: 10px; 32 } 33 #stage1{ 34 position:absolute; 35 top:10px; 36 left:30px; 37 } 38 #stage2{ 39 position:absolute; 40 top:10px; 41 left:170px; 42 } 43 #stage3{ 44 position:absolute; 45 top:10px; 46 left:310px; 47 } 48 #stage4{ 49 position:absolute; 50 top:10px; 51 left:450px; 52 } 53 .ui-state-highlight { 54 height: 100px; 55 border: dotted 2px #0000ff; 56 } 57 </style> 58 <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> 59 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 60 <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 61 </head> 62 63 <body> 64 <div id = "sortarea"> 65 <ul id = "stage"> 66 <li id = "stage1">①</li> 67 <li id = "stage2">②</li> 68 <li id = "stage3">③</li> 69 <li id = "stage4">④</li> 70 </ul> 71 </div> 72 <button type="button" id = "resetbutton">リセット</button> 73 <script> 74 jQuery(function(){ 75 jQuery("#stage").sortable({ 76 cursor: 'move', 77 opacity: 0.7, 78 placeholder: 'ui-state-highlight', 79 containment:"#sortarea", 80 //x方向に固定 81 axis:"x" 82 }); 83 jQuery(".sortable").disableSelection(); 84 }); 85 $("#resetbutton").on("click",function(){location.reload()}); 86 </script> 87 </body> 88 89</html>
回答1件
あなたの回答
tips
プレビュー