谷本 心 in せろ部屋

はてなダイアリーから引っ越してきました

Sortableに閉じるボタンを付けたい。

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