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

Drag and Drop - YUI 2.5.2 - Very slow

Expand Messages
  • Dustin
    I have gotten the DnD to work successfully in the following scenario. I have one list that can be sorted into 3 other lists, it can also be dropped back into
    Message 1 of 2 , Jun 1, 2008
    View Source
    • 0 Attachment
      I have gotten the DnD to work successfully in the following scenario.

      I have one list that can be sorted into 3 other lists, it can also be
      dropped back into itself. It worked fine until I added a lot of items
      to the list "var rows=336,cols=4,i,j;", now it is slow and choppy. It
      this to be expected, can I optimize in anyway.

      Any help is appreciated.

      Here is the code that I am using:

      <script type="text/javascript">
      (function() {
      var Dom = YAHOO.util.Dom;
      var Event = YAHOO.util.Event;
      var DDM = YAHOO.util.DragDropMgr;

      YAHOO.DDApp = {
      init: function() {

      var rows=336,cols=4,i,j;
      for (i=1;i<cols+1;i=i+1) {
      new YAHOO.util.DDTarget("ul"+i);
      }
      for (i=1;i<cols+1;i=i+1) {
      for (j=1;j<rows+1;j=j+1) {
      new YAHOO.DDList("li" + i + "_" + j);
      }
      }

      }
      };

      YAHOO.DDList = function(id, sGroup, config) {
      YAHOO.DDList.superclass.constructor.call(this, id, sGroup, config);
      this.logger = this.logger || YAHOO;
      var el = this.getDragEl();
      Dom.setStyle(el, "opacity", 0.70); // The proxy is slightly
      transparent
      this.goingUp = false;
      this.lastY = 0;
      };

      YAHOO.extend(YAHOO.DDList, YAHOO.util.DDProxy, {
      startDrag: function(x, y) {
      this.logger.log(this.id + " startDrag");
      // make the proxy look like the source element
      var dragEl = this.getDragEl();
      var clickEl = this.getEl();
      Dom.setStyle(clickEl, "visibility", "hidden");
      dragEl.innerHTML = clickEl.innerHTML;
      //Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
      Dom.setStyle(dragEl, "backgroundColor", "transparent");
      Dom.setStyle(dragEl, "border", "0");
      Dom.setStyle(dragEl, "backgroundImage",
      "url('images/Card.png')");
      Dom.setStyle(dragEl, "backgroundRepeat", "no-repeat");
      Dom.setStyle(dragEl, "height", "196px");
      Dom.setStyle(dragEl, "width", "196px");
      },

      endDrag: function(e) {
      var srcEl = this.getEl();
      var proxy = this.getDragEl();
      // Show the proxy element and animate it to the src
      element's location
      Dom.setStyle(proxy, "visibility", "");
      var a = new YAHOO.util.Motion(
      proxy, {
      points: {
      to: Dom.getXY(srcEl)
      }
      },
      0.2,
      YAHOO.util.Easing.easeOut
      )
      var proxyid = proxy.id;
      var thisid = this.id;

      // Hide the proxy and show the source element when finished
      with the animation
      a.onComplete.subscribe(function() {
      Dom.setStyle(proxyid, "visibility", "hidden");
      Dom.setStyle(thisid, "visibility", "");
      });
      a.animate();
      //DoServiceCall("l");
      },

      onDragDrop: function(e, id) {
      // If there is one drop interaction, the li was dropped
      either on the list,
      // or it was dropped on the current location of the source
      element.
      if (DDM.interactionInfo.drop.length === 1) {
      // The position of the cursor at the time of the drop
      (YAHOO.util.Point)
      var pt = DDM.interactionInfo.point;
      // The region occupied by the source element at the time
      of the drop
      var region = DDM.interactionInfo.sourceRegion;
      // Check to see if we are over the source element's
      location. We will
      // append to the bottom of the list once we are sure it
      was a drop in
      // the negative space (the area of the list without any
      list items)
      if (!region.intersect(pt)) {
      var destEl = Dom.get(id);
      var destDD = DDM.getDDById(id);
      destEl.appendChild(this.getEl());
      destDD.isEmpty = false;
      DDM.refreshCache();
      }
      }
      },

      onDrag: function(e) {
      // Keep track of the direction of the drag for use during
      onDragOver
      var y = Event.getPageY(e);
      if (y < this.lastY) {
      this.goingUp = true;
      } else if (y > this.lastY) {
      this.goingUp = false;
      }
      this.lastY = y;
      },

      onDragOver: function(e, id) {
      var srcEl = this.getEl();
      var destEl = Dom.get(id);
      // We are only concerned with list items, we ignore the dragover
      // notifications for the list.
      if (destEl.nodeName.toLowerCase() == "li") {
      var orig_p = srcEl.parentNode;
      var p = destEl.parentNode;
      if (this.goingUp) {
      p.insertBefore(srcEl, destEl); // insert above
      } else {
      p.insertBefore(srcEl, destEl.nextSibling); // insert
      below
      }
      DDM.refreshCache();
      }
      }
      });
      Event.onDOMReady(YAHOO.DDApp.init, YAHOO.DDApp, true);
      })();
      </script>
    • Dav Glass
      Dustin -- This has come up on the list before, what you need to so is implement the Interaction Groups in DragDrop:
      Message 2 of 2 , Jun 1, 2008
      View Source
      • 0 Attachment
        Dustin --

        This has come up on the list before, what you need to so is implement the Interaction Groups in DragDrop:
        http://developer.yahoo.com/yui/dragdrop/#groups

        Here is an example I did a while back:
        http://blog.davglass.com/files/yui/dd16/

        View the source, there are comments related to Performance

        Does that help?
        Dav


        Dav Glass
        dav.glass@...
        blog.davglass.com




        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: Dustin <durilai@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Sunday, June 1, 2008 1:02:00 AM
        Subject: [ydn-javascript] Drag and Drop - YUI 2.5.2 - Very slow

        I have gotten the DnD to work successfully in the following scenario.

        I have one list that can be sorted into 3 other lists, it can also be
        dropped back into itself. It worked fine until I added a lot of items
        to the list "var rows=336,cols=4,i,j;", now it is slow and choppy. It
        this to be expected, can I optimize in anyway.

        Any help is appreciated.

        Here is the code that I am using:

        <script type="text/javascript">
        (function() {
        var Dom = YAHOO.util.Dom;
        var Event = YAHOO.util.Event;
        var DDM = YAHOO.util.DragDropMgr;

        YAHOO.DDApp = {
        init: function() {

        var rows=336,cols=4,i,j;
        for (i=1;i<cols+1;i=i+1) {
        new YAHOO.util.DDTarget("ul"+i);
        }
        for (i=1;i<cols+1;i=i+1) {
        for (j=1;j<rows+1;j=j+1) {
        new YAHOO.DDList("li" + i + "_" + j);
        }
        }

        }
        };

        YAHOO.DDList = function(id, sGroup, config) {
        YAHOO.DDList.superclass.constructor.call(this, id, sGroup, config);
        this.logger = this.logger || YAHOO;
        var el = this.getDragEl();
        Dom.setStyle(el, "opacity", 0.70); // The proxy is slightly
        transparent
        this.goingUp = false;
        this.lastY = 0;
        };

        YAHOO.extend(YAHOO.DDList, YAHOO.util.DDProxy, {
        startDrag: function(x, y) {
        this.logger.log(this.id + " startDrag");
        // make the proxy look like the source element
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        Dom.setStyle(clickEl, "visibility", "hidden");
        dragEl.innerHTML = clickEl.innerHTML;
        //Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
        Dom.setStyle(dragEl, "backgroundColor", "transparent");
        Dom.setStyle(dragEl, "border", "0");
        Dom.setStyle(dragEl, "backgroundImage",
        "url('images/Card.png')");
        Dom.setStyle(dragEl, "backgroundRepeat", "no-repeat");
        Dom.setStyle(dragEl, "height", "196px");
        Dom.setStyle(dragEl, "width", "196px");
        },

        endDrag: function(e) {
        var srcEl = this.getEl();
        var proxy = this.getDragEl();
        // Show the proxy element and animate it to the src
        element's location
        Dom.setStyle(proxy, "visibility", "");
        var a = new YAHOO.util.Motion(
        proxy, {
        points: {
        to: Dom.getXY(srcEl)
        }
        },
        0.2,
        YAHOO.util.Easing.easeOut
        )
        var proxyid = proxy.id;
        var thisid = this.id;

        // Hide the proxy and show the source element when finished
        with the animation
        a.onComplete.subscribe(function() {
        Dom.setStyle(proxyid, "visibility", "hidden");
        Dom.setStyle(thisid, "visibility", "");
        });
        a.animate();
        //DoServiceCall("l");
        },

        onDragDrop: function(e, id) {
        // If there is one drop interaction, the li was dropped
        either on the list,
        // or it was dropped on the current location of the source
        element.
        if (DDM.interactionInfo.drop.length === 1) {
        // The position of the cursor at the time of the drop
        (YAHOO.util.Point)
        var pt = DDM.interactionInfo.point;
        // The region occupied by the source element at the time
        of the drop
        var region = DDM.interactionInfo.sourceRegion;
        // Check to see if we are over the source element's
        location. We will
        // append to the bottom of the list once we are sure it
        was a drop in
        // the negative space (the area of the list without any
        list items)
        if (!region.intersect(pt)) {
        var destEl = Dom.get(id);
        var destDD = DDM.getDDById(id);
        destEl.appendChild(this.getEl());
        destDD.isEmpty = false;
        DDM.refreshCache();
        }
        }
        },

        onDrag: function(e) {
        // Keep track of the direction of the drag for use during
        onDragOver
        var y = Event.getPageY(e);
        if (y < this.lastY) {
        this.goingUp = true;
        } else if (y > this.lastY) {
        this.goingUp = false;
        }
        this.lastY = y;
        },

        onDragOver: function(e, id) {
        var srcEl = this.getEl();
        var destEl = Dom.get(id);
        // We are only concerned with list items, we ignore the dragover
        // notifications for the list.
        if (destEl.nodeName.toLowerCase() == "li") {
        var orig_p = srcEl.parentNode;
        var p = destEl.parentNode;
        if (this.goingUp) {
        p.insertBefore(srcEl, destEl); // insert above
        } else {
        p.insertBefore(srcEl, destEl.nextSibling); // insert
        below
        }
        DDM.refreshCache();
        }
        }
        });
        Event.onDOMReady(YAHOO.DDApp.init, YAHOO.DDApp, true);
        })();
        </script>


        ------------------------------------

        Yahoo! Groups Links
      Your message has been successfully submitted and would be delivered to recipients shortly.