質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3268閲覧

[jquery sortable] 表示数字がうまく入れ替わらない

seint.k

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/23 09:29

編集2016/09/23 09:42

①、②、③、④という数字を画面上に表示し入れ替えることが出来るプログラムを作成しています。
ほぼ完成に近い状態なのですが、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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/23 09:33

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
seint.k

2016/09/23 09:42

助言ありがとうございます。 修正が完了しました。
guest

回答1

0

ベストアンサー

positionで位置を固定していることが問題かとは思います。

そうです。絶対配置を削除して、下記のようにすれば間隔のずれも起こらないと思います。

CSS

1body { 2 background-color: black; 3 color: #FFF; 4 text-align: center; 5 font-size: 70px; 6} 7 8#stage { 9 margin: 10px 0; 10 padding: 0; 11} 12 13#stage > li { 14 display: block; /* add */ 15 float: left; /* add */ 16 width: 100px; 17 list-style: none; 18 margin: 7px; 19 border: 2px solid #fff; 20 height: 100px; 21} 22 23#sortarea { 24 position: relative; 25 width: 100%; 26 height: 120px; 27 padding: 5px; 28 border-style: dashed; 29 border-radius: 10px; 30} 31 32.ui-state-highlight { 33 height: 100px; 34 border: dotted 2px #0000ff; 35} 36```**動くサンプル:**[https://jsfiddle.net/3og54j91/](https://jsfiddle.net/3og54j91/)

投稿2016/09/23 10:05

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問