トップ  >  2014年  >  2014.05.15 [jQuery] タイルをドラッグ&ドロップ
features [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-3
1-4
2-1
2-2
2-3
2-3
2-3
2-3
2-4
3-1
3-2
3-3
3-4
3-4
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

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] タイル表示

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2018 keibunsya all right reserved.