備忘録、Ｒｅａｃｔでドラッグ＆ドロップ

すこしずつ読んでみよう。

http://webcloud.se/truly-reactive-sortable-component/

プロパティでイニシャルステートを初期化する。ふむふむ。

  getInitialState: function() {
    return {data: this.props.data};
  },

this→that置換が不要必要？？

jsfiddle上ではthisのまま動いているようですが、
手元ではthisをthatに変えないと動かなかったなぜ???

  render: function() {
    var that = this;
    var listItems = this.state.data.colors.map(function(item, i) {
      var dragging = (i == that.state.data.dragging) ? "dragging" : "";
      return <li data-id={i}
            className={dragging}
            key={i}
            draggable="true"
            onDragEnd={that.dragEnd}
            onDragOver={that.dragOver}
            onDragStart={that.dragStart}>
          {item}
        </li>
      ;
    });
    return (<div>
    <ol>{listItems}</ol>
    <pre>App State: <br /><br/>{JSON.stringify(this.state,0,2)}</pre>
    </div>)
  }
});

isFiniteの挙動

node.jsで確かめてみた。undefinedを区別できるのかな。

> isFinite(1);
true
> isFinite(undefined);
false
> isFinite(null);
true
> isFinite('');
true

配列の要素の入れ替え

インデックスfromの要素をインデックスtoへ移動させるコード
spliceというメソッドを使うと簡潔に書けるみたい。

• spliceは頭の引数２つで取り出し。

items.splice(from,1)ではfromから1つ要素を
取り出して、それを返却値に返す。itemsの内容は取り出した後の配列になる。

• 3つ目以降の引数で挿入。

items.splice(to,0,"hoge")みたいにすると
インデックスtoから0つの要素の取り出し（つまり何も取りださない）に加えて
to番目の要素に"hoge"を加えている。

    items.splice(to, 0, items.splice(from,1)[0]);

ドラッグオーバーの時のドラッグ先インデックスの編集

ここの、意味がよくわからなかった。
なくても動くような気がするのですが、何のために
いれているのだろう。

    if((e.clientY - over.offsetTop) > (over.offsetHeight / 2)) to++;
    if(from < to) to--;