お世話になります。
5*2のマス目があり、全てのマスは左右にのみ動く状態ですが
ここで、一つのマスを右にドラッグアンドドロップで動かすと
それよりも右にあるマスも連動して右に動くようにしたいのですが
実装方法がわかりません。
例えば、下記の22を動かすと、23、24、25も一緒に動き、
10番台のddは動かない、といった動作になってほしいです。
※ddに説明用の数字を入れておりますが、実際には数字は入らず、同じ文字列が入ります。
※現状は各ddは独立して稼働するだけです。
実行環境は、
HTML5.0、jQuery1.11.3、jQuery-ui
お手数ですが、ご助言頂けないでしょうか。
よろしくお願い致します。
以下ソースコードです。
html
1<html> 2<head> 3<script src="jquery-1.11.3.min.js"></script> 4<script src="jquery-ui.js"></script> 5<script src="test.js"></script> 6<link rel="stylesheet" href="test.css"> 7</head> 8<body> 9<dl> 10<dd class="dragdrop" style="top:5px; left:120px;">11</dd> 11<dd class="dragdrop" style="top:5px; left:240px;">12</dd> 12<dd class="dragdrop" style="top:5px; left:360px;">13</dd> 13<dd class="dragdrop" style="top:5px; left:480px;">14</dd> 14<dd class="dragdrop" style="top:5px; left:600px;">15</dd> 15<dd class="dragdrop" style="top:65px; left:200px;">21</dd> 16<dd class="dragdrop" style="top:65px; left:300px;">22</dd> 17<dd class="dragdrop" style="top:65px; left:400px;">23</dd> 18<dd class="dragdrop" style="top:65px; left:500px;">24</dd> 19<dd class="dragdrop" style="top:65px; left:600px;">25</dd> 20</dl> 21</body> 22</html>
CSS
1#jquery-ui-draggable { 2 width: 100px; 3 height: 100px; 4 padding: 30px; 5 margin: 0; 6 border-radius: 10px; 7} 8dd{ 9 position: absolute; 10 width: 100px; 11 height: 50px; 12 margin: 0; 13 border-radius: 2px; 14 border: 1px solid #000; 15}
JavaScript
1$(function() { 2 $(".dragdrop").draggable({ 3 axis: 'x', 4 }); 5});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/21 06:33