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

Re: [ydn-javascript] Drag and Drop - YUI 2.5.2 - Very slow

Expand Messages
  • Dav Glass
    Dustin -- This has come up on the list before, what you need to so is implement the Interaction Groups in DragDrop:
    Message 1 of 2 , Jun 1, 2008
      Dustin --

      This has come up on the list before, what you need to so is implement the Interaction Groups in DragDrop:

      Here is an example I did a while back:

      View the source, there are comments related to Performance

      Does that help?

      Dav Glass

      + 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
      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",
      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)
      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", "");

      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
      if (DDM.interactionInfo.drop.length === 1) {
      // The position of the cursor at the time of the drop
      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);
      destDD.isEmpty = false;

      onDrag: function(e) {
      // Keep track of the direction of the drag for use during
      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
      Event.onDOMReady(YAHOO.DDApp.init, YAHOO.DDApp, true);


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