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が走って欲しいんだけど、今ひとつやり方が分からん。
一回ぐらい、上から下まで、ソース読まんとダメかも (^^;