上記の件で質問です。
下にDraggable要素でキーボードを作り、それをドラッグしSortable要素で作ったマスへ入れるというものを作成しています。
マスはキーとほぼ同じ大きさでスポっと入るような感じです。
上に書いたような基本的な動きは実装できたのですが、
マスが上下にあり、下のキーボードからキーを移動させて上のマスに入れようとしたとき、下のマスの上を通り過ぎるとものすごい位置ズレを起こしてしまいます。
下のマスの上を通らないようにするとうまくいくのですが、直感的な操作を目指して作っているので悩みどころです。
マスの上に重なった時、マスの子要素にキーが入っているのでこうなっているのかな、と思ったのですがよく分からりませんでした。
何か解決策などあれば、よろしくお願い致します。
lang
1<div class="main_content"> 2 <div class="grid_area"> 3 <div class="grid"></div> 4 </div><br> 5 <div class="grid_area"> 6 <div class="grid"></div> 7 </div> 8</div> 9 10<div class="keybord"> 11 <div class="key_area"> 12 <div class="key">A</div> 13 <div class="key">B</div> 14 <div class="key">C</div> 15 <!-- 以下、Zまで続く --> 16 </div> 17</div>
lang
1$(".key").draggable({ 2 connectToSortable: ".drop", 3 revert: "invalid", 4 helper: "clone", 5 stop: function(event, ui){ 6 // 移動先にあった子要素を消す 7 var par = ui.helper.parent(); 8 if(par.attr("class") != "key_area"){ 9 par.empty(); 10 par.append(ui.helper); 11 } 12 } 13}); 14 15$(".grid").sortable({ 16 // マスにキーを固定 17 cancel:".key" 18});
// 追記
その後自分で色々調べたのですが結局解決はしておりません。
何か代替案でもいいのでお答えいただけませんでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。