 |
[jQuery] タイルをドラッグ＆ドロップで並べ替え 2014.05.15記 |
|
http://www.keibunsya.co.jp/modules/features/index.php?content_id=139 前回タイル表示したものを今回はドラッグ＆ドロップして並べ替えたいと思います。 今回並べ替えには、「jquery.shapeshift.js」を利用しました http://mcpants.github.io/jquery.shapeshift/ |
1-1
1-2
1-2
1-2
1-2
1-2
1-3
1-4
2-1
2-2
2-3
2-3
2-3
2-3
2-3
2-3
2-3
2-4
3-1
3-2
3-3
3-4
3-4
3-4
4-1
4-1
4-1
4-1
4-1
4-1
4-1
4-1
4-1
4-2
4-3
4-4
5-1
5-2
5-3
5-4
5-4
5-4
5-4
5-4
5-4
5-4
5-4
5-4
5-4
5-4
5-4
5-4
HTML
<div id="ddtile">
<div class="tile">1-1</div>
<div class="tile">1-2<br>1-2<br>1-2</div>
<div class="tile">1-3</div>
<div class="tile">1-4</div>
<div class="tile">2-1</div>
<div class="tile">2-2</div>
<div class="tile">2-3<br>2-3<br>2-3<br>2-3</div>
<div class="tile">2-4</div>
<div class="tile">3-1</div>
<div class="tile">3-2</div>
<div class="tile">3-3</div>
<div class="tile">3-4<br>3-4</div>
<div class="tile">4-1<br>4-1<br>4-1<br>4-1<br>4-1</div>
<div class="tile">4-2</div>
<div class="tile">4-3</div>
<div class="tile">4-4</div>
<div class="tile">5-1</div>
<div class="tile">5-2</div>
<div class="tile">5-3</div>
<div class="tile">5-4<br>5-4<br>5-4<br>5-4<br>5-4<br>5-4<br>5-4</div>
</div>
CSS
<style type="text/css">
.tile {
border:1px solid #999;
background:#f0f0f0;
float:left;
width:130px;
margin:0 10px 10px 0;
cursor:move;
}
#ddtile {
position: relative;
width: 595px;
border: 1px dashed red;
}
#ddtile > div {
position: absolute;
}
#ddtile > .ss-placeholder-child {
background: transparent;
border: 1px dashed blue;
}
</style>
JavaScript
<script src="jquery-2.1.0.min.js"></script>
<script src="jquery.tile.js"></script>
<script src="./files/js/jquery-ui-1.10.4.min.js"></script>
<script src="./files/js/jquery.shapeshift.js"></script>
<script type="text/javascript">
$(function(){
$('.tile').tile(4);
$('#ddtile').shapeshift();
$("#ddtile").on('ss-drop-complete', function(e){
$('.tile').tile(4);
});
});
</script>
|
ドラッグ＆ドロップ後のタイルの高さがうまくいきません。 （ドラッグ＆ドロップした後にもう一度同じタイルをちょっとだけ移動して同じ位置に置くとタイルの高さが揃います。） 高さ問題ともうひとつは並べ替え後の位置を記憶しておいて、再度このページに来た時に表示させるというのが必要かな。 このあたりはおいおい。 |
 2014.06.15 [MVNO] 通話SIM |
 2014年 |
 2014.04.15 [jQuery] タイル表示 |
ホーム