jQueryUIのsortableにハマる

javascript

超地道な作業ログを残してみる。

optionでhelperを"clone"に指定したいんだけど、全然クローンされない。。。
placeholderも表示先エリアをCSSで指定しても全然表示されない。。
正直ソースコードの行数見てげんなりしたけど（コメント込みで7617行）、仕事なので仕方ない。

jquery-ui.jsを見てみると、2401行目のcreatePlaceholderで「placeholder: 'className'」で指定したクラス名が追加されたdiv要素が作られてる。

createPlaceholder: function(that) {
  var self = that || this, o = self.options;

　if(o.placeholder.constructor == String) {
　　var className = o.placeholder;
　　o.placeholder = {
　　　element: function() {
　　　　return $('<div></div>').addClass(className)[0];
　　　},
  　　update: function(i, p) {
	p.css(i.offset()).css({ width: i.outerWidth(), height: i.outerHeight() });
　　　}
　　};
　}
		
　self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem)).appendTo('body').css({ position: 'absolute' });
　o.placeholder.update.call(self.element, self.currentItem, self.placeholder);
},

で、2590行目で、this.options.placeholderの判定をしているんだけど、それがどうにも奇妙な感じ。

if(this.options.placeholder != 'clone')
  this.currentItem.css('visibility', 'hidden');

いきなり'clone'って何よ？
文脈見る限りでは、placeholderじゃなくてhelperじゃないかと思うのだけれども。。。
ちなみにplaceholderには先ほどのcreatePlaceholder()で生成されたオブジェクトが入っているので、何を指定しても元の要素が非表示になっちゃう。

なので、ここはhelperに変更した。

if(this.options.helper != 'clone')

placeholderの方はなるほどちょっと分かった。
先ほどのcreatePlaceholder()で「position:absolute」を指定しているということは、テーブルで組んだレイアウトを想定してないっぽいです。
というより、createPlaceholder()はマウスドラッグ前に実行されるので、appendToしちゃってる時点で表示先エリアの表示になっていないような気がする。
俺が読み間違えているからなのか。

超バッドな解決法として、helperをcloneにせず、createPlaceholder()でクローンを作るようにしたらそれっぽく動くようになった。
うーん、明日空いてる時間にまた考えよう。。。


ちなみに、ドラッグ中の要素が元の要素より横幅が小さくなってしまうのも嫌だったので、それは2509行目に

this.helper.css({ width: this.currentItem.width() });

とすることで元の要素と同じ横幅にした。


ドラッグ&ドロップは上手くインタラクションを付けないとかえって使いずらくなってしまうので、いろいろ試行錯誤。
ソース読むコストと考えて自作するか検討するか。。。