2017年06月 / 05月≪ 123456789101112131415161718192021222324252627282930≫07月

インフォメーション

FC2ブログで画像等を一括アップロードするソフトを地味に配布してます。
FC2ブログ用ファイルアップロードの最新版はこちら
(ベクター)FC2ブログ用ファイルアップロード

--.--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 |  --:--  |  スポンサー広告  |  Top↑

2012.06.05 (Tue)

jQueryUIのdraggableで複数の要素を同時に移動

jQueryのdraggableで複数の要素を同時に同じ感じで移動できるようにしたい案。

selectableで選択して、選択したもののみ同時に移動できるようにしてみた。
↓サンプル。ここで動作確認できる。
http://jsfiddle.net/4GjRn/

html
<div id="wrap">
<div id="b1" class="box">b1</div>
<div id="b2" class="box">b2</div>
<div id="b3" class="box">b3</div>
<div id="b4" class="box">b4</div>
<div id="b5" class="box">b5</div>
</div>


js

$("#wrap .box").draggable({
start:function(e,ui){
$(".ui-selected").each(function(){
var apos = {
top:$(this).position().top-ui.position.top,
left:$(this).position().left-ui.position.left
};
$(this).data("apos", apos);
});
},
drag:function(e,ui){
$(".ui-selected").not($(this)).each(function(){
$(this).css({
top:ui.position.top+$(this).data("apos").top,
left:ui.position.left+$(this).data("apos").left
});
});
}
});
$("#wrap").selectable({});


css

#wrap{
width: 400px;
height: 500px;
}
.box{
width: 50px;
height: 50px;
background-color: #EFE;
border: solid 1px #CCC;
position: absolute;
}
.ui-selecting{
border: dashed 1px #CCC;
background-color: #FEE
}
.ui-selected{
background-color: #FCC;
}
.ui-selectable-helper{
position: absolute; z-index: 100; border:1px dotted black;
}
#b1{
top: 10px;
left: 20px;
}
#b2{
top: 50px;
left: 100px;
}
#b3{
top: 40px;
left: 40px;
}
#b4{
top: 200px;
left: 100px;
}
#b5{
top: 160px;
left: 20px;
}


ドラッグ開始時に選択されてる要素のdata("apos")にドラッグ要素からの相対位置を保持して、
dragでドラッグ移動された際に同時にcssで指定して動かしてる。
stopでapos要素を削除して後始末したほうがいいかな?


 |  22:20  |  JavaScript  |  トラックバック(0)  |  コメント(3)  |  Top↑

Comment

●質問です

はじめまして、星野さんのブログから来させていただきました。
私も今大喜利サイトを作るために同じボケグラムというプログラムの改造で四苦八苦しているのですが
上野さんのツイート↓(ボケグラムのこと??)を読んでいて思ったのですが、
http://twitter.com/uenomemo/status/210452337016307712
星野さんのサイトのように過去のデータがあるわけではなく
新しくサイトを立ち上げる場合なら上野さんなら一から自分で書き直されますか?(労力的な意味で)
正直、perlで書き直した方が楽なのかなと迷っております。
今後の参考にさせてください、よろしくお願いします。
Huyu |  2012.06.22(金) 20:14 |  URL |  【コメント編集】

●Re: 質問です

はじめましてHuyuさん。コメントありがとうございます。
新しく大喜利サイトを立ち上げるなら、ボケグラムをがんばって改造するか、1から自分で書き直すか・・・ですが、
やっぱり改造の内容や量によりますね。
自分なら、新しく機能を追加するとか、デザインを変えるという程度の改造であれば、めんどくさいので既にあるものを改造します。
もっと根本的な動きを変えるとか、既存の動きにかなりからんでくる改造が多いとか、
今後もっと変える予定があるとかであれば1から作ります。
あとはある程度頑張って改造してみて、それでも改造が辛すぎる場合も1から書き直しますw

1から書き直すめんどくささと、既存のコードを読んで改造するめんどくささを比較して、自分の中ではどっちがマシかなって判断ですね。
同じくらいなら書き直した方がいいです。

ちなみにそのツイートはボケグラム自体ではなくて、今回ボケグラムに組み込んだ会員登録機能の部分についてのツイートです。
上野メモ |  2012.06.23(土) 05:01 |  URL |  【コメント編集】

そうですね、まずは既存のコードの把握と実際に自分がプログラムに実行させたい内容次第って感じですね・・・
お返事ありがとうございました、がんばってみます!失礼しました〜
Huyu |  2012.06.23(土) 12:58 |  URL |  【コメント編集】

コメントを投稿する

URL
コメント
パス  編集・削除するのに必要
非公開  管理者だけにコメントを表示
 

Trackback

この記事のトラックバックURL

この記事へのトラックバック

 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。