WebPartsを作る時に、パーツを「閉じる」ためのボタンを付けたいので、
とりあえずscript.aculo.usのSortableに閉じる機能を追加しようかと
、、、思ったんだけど、今ひとつ上手くいかない。
てか、JavaScript系ライブラリのソースが理解できん。
Sortableに、ちょこっと手を加えて（removerって属性を追加）
create: function(element) {
element = $(element);
var options = Object.extend({
element: element,
tag: 'li', // assumes li children, override with tag: 'tagname'
dropOnEmpty: false,
tree: false,
treeTag: 'ul',
overlap: 'vertical', // one of 'vertical', 'horizontal'
constraint: 'vertical', // one of 'vertical', 'horizontal', false
containment: element, // also takes array of elements (or id's); or false
handle: false, // or a CSS class
remover: false, // or a CSS class
only: false,
hoverclass: null,
ghosting: false,
scroll: false,
scrollSensitivity: 20,
scrollSpeed: 15,
format: /^[^_]*_(.*)$/,
onChange: Prototype.emptyFunction,
onUpdate: Prototype.emptyFunction
}, arguments[1] || {});
// clear any old sortable with same element
this.destroy(element);
// build options for the draggables
var options_for_draggable = {
revert: true,
scroll: options.scroll,
scrollSpeed: options.scrollSpeed,
scrollSensitivity: options.scrollSensitivity,
ghosting: options.ghosting,
constraint: options.constraint,
handle: options.handle,
remover: options.remover };
あとは、handleの定義をしている所で、ついでにremoverにもfunctionを定義。
(this.findElements(element, options) || []).each( function(e) {
// handles are per-draggable
var handle = options.handle ?
Element.childrenWithClassName(e, options.handle)[0] : e;
options.draggables.push(
new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
Droppables.add(e, options_for_droppable);
if(options.tree) e.treeNode = element;
options.droppables.push(e);
if(options.remover) {
var remover = Element.childrenWithClassName(e, options.remover)[0];
if (remover) {
remover.onclick = function(){Element.remove(e)};
}
}
});なんてことをすれば（作法的には何かイマイチな気がするけど）
とりあえず、Draggableを閉じるためのCSS Classを定義できる。
で、閉じた時にSortable#onUpdateが走って欲しいんだけど、今ひとつやり方が分からん。
一回ぐらい、上から下まで、ソース読まんとダメかも (^^;
