Loading ...
Sorry, an error occurred while loading the content.
 

DDList example

Expand Messages
  • Hubert Garrido
    the sortable list (DDList.js) example is great, but when I tried to adapt it to an image list, whose height varies from 100px to 200px, I found it reacted a
    Message 1 of 1 , Aug 29, 2006
      the sortable list (DDList.js) example is great, but when I tried to
      adapt it to an image list, whose height varies from 100px to 200px, I
      found it reacted a little strange.

      I made a few changes to the onDragOver function, and it works better,
      at least for me:

      YAHOO.example.DDList.prototype.onDragOver = function(e, id) {
      // this.logger.log(this.id.toString() + " onDragOver " + id);
      var el;

      if ("string" == typeof id) {
      el = YAHOO.util.DDM.getElement(id);
      } else {
      el = YAHOO.util.DDM.getBestMatch(id).getEl();
      }

      var mid = YAHOO.util.DDM.getPosY(el) + ( Math.floor(el.offsetHeight /
      2));
      var el2 = this.getEl();
      var p = el.parentNode;
      if (el.offsetTop < el2.offsetTop) { // up
      if (YAHOO.util.Event.getPageY(e) < mid) {
      p.insertBefore(el2, el);
      }
      } else { // down
      if (YAHOO.util.Event.getPageY(e) > mid) {
      p.insertBefore(el, el2);
      }
      }

      };

      Changes:
      - computing the "mid" value: I guess that offsetHeight should be used
      instead of the previous offsetTop
      - comparing with the "mid" value: when moving up, change is triggered
      when we move up (<) the mid position, but when moving down, we change
      when we pass it (>)

      I still have to look closer at the code, as when playing with it, the
      list sometimes gives strange results (items other than the one being
      dragged are reordered when moving an item relatively fast, dragged
      item stopping to trigger events...)
    Your message has been successfully submitted and would be delivered to recipients shortly.