jQuery勉強中。
jsの挙動がどうなっているのか解明したい。
Jsファイルのコメントアウトに自分の予想を列挙してる。
全部解明出来るように奮闘中。あっ、正しく無い点が多いと思うので参考にはならないかも。
どんなものを読み解いているかは以下からみれます。
http://codepen.io/kotar0/pen/adJdjR
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Sortable with transitions and varying height support</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Look! The items are different heights but the transitions still work</p>
<ul class="slides">
<li class="slide slide1">Slide 1</li>
<li class="slide slide2">Slide 2</li>
<li class="slide slide3">Slide 3</li>
<li class="slide slide4">Slide 4</li>
<li class="slide slide5">Slide 5</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
$(".slides").sortable({
placeholder: 'slide-placeholder', //side-placeholderはCSSにあった。ドラッグ先のCSSスタイルを指定する事が出来る。
axis: "xy", //Sortする方向
revert: 150, //trueでアニメーションをON、数値の場合は、アニメーションにかける時間を設定。
start: function (e, ui) { //startの意味は、sortableの開始をトリガーとして、動くstart(event,ui)で書かれて、uiというオブジェクトの中にいろいろとさらなるオブジェクトが格納されている。
placeholderHeight = ui.item.outerHeight(); //掴んだ要素の高さを取得マージンをはいらない。.itemは今ドラッグしているもの
//console.log(ui.placeholder);//この時点では、ui.placeholder.heightの値は0
ui.placeholder.height(placeholderHeight + 15); //ui.placeholder.heightに、Plaiceholderの高さとして:afterを含めた高さを格納。
$('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder); //ui.placeholderにオブジェクトを格納。
//console.log(ui.placeholder)
}, //次の関数に移れば、ui.placeholderの値はリセットされる(0になる。)のでは無いの？そうだと思う。
change: function (event, ui) { //*DOMが書き換わった後*の動いている途中の状態。
ui.placeholder.stop().height(0).animate({
height: ui.item.outerHeight() + 15
}, 300); //ui.placeholderの動きをストップして、ui.placeholderの高さを0にして、高さPlaceholder＋15までアニメートさせる？Placeholder(グレーの部分)の要素の高さ自体を広げる。
placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height")); //.slide-placeholderのdata-height属性の数字を撮ってきている。parseInt()は文字列を整数に変換するグローバル関数。9行目のやつを取ってきてる。
$(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
height: 0
}, 300, function () { //このアニメーションは残りのSlide達の位置の処理ではないか？
$(this).remove();
placeholderHeight = ui.item.outerHeight() //また宣同じ内容を言している。。。なぜだ？
$('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
}); //ここでも同じ内容を宣言している。。
},
stop: function (e, ui) {
$(".slide-placeholder-animator").remove(); //.slide-placeholder-animatorここで察するに、少なくともRemoveする必要があるということ。
},
});
style.css
body {
padding: 20px;
}
.slides {
list-style: none;
margin: 0;
padding: 0;
width: 300px;
}
.slide {
padding: 15px;
background-color: #2F2F2F;
margin: 0 0 15px;
text-align: center;
color: #FFF;
border: 2px solid #444;
}
.slide-placeholder {
background: #DADADA;
position: relative;
}
.slide-placeholder:after { /*afterは後ろに追加する要素、ここでは.slide-placeholderに15pxの白を入れてる。クリックして持ち上げた時に下にでるグレーの影の下に発生している。*/
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 15px;
background-color: red;
}
.slide1 {
height: 30px;
}
.slide2 {
height: 30px;
}
.slide3 {
height: 30px;
}
.slide4 {
height: 30px;
}
.slide5 {
height: 30px;
}