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

Reg Making the Cells of Scrollable-DataTable Draggable

Expand Messages
  • Shadab Sayani
    Hi, My application involves a datatable whose cells are to be dragged and dropped into a different area. I started off with the following approach (with this
    Message 1 of 1 , May 31 4:59 AM
    • 0 Attachment
      Hi,
      My application involves a datatable whose cells are to
      be dragged and dropped into a different area.
      I started off with the following approach (with this
      yui example
      http://developer.yahoo.com/yui/examples/dragdrop/list.html?mode=dist
      as basis):-

      ************ START OF CODE ************************

      var Dom = YAHOO.util.Dom;
      var Event = YAHOO.util.Event;
      var DDM = YAHOO.util.DragDropMgr;

      function initTable()
      {
      var myColumnHeaders = [
      {key:"areacode",className:"col1"},
      {key:"state",className:"col2"}
      ];
      var myColumnSet = new
      YAHOO.widget.ColumnSet(myColumnHeaders);

      var myDataSource = new
      YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
      myDataSource.responseType =
      YAHOO.util.DataSource.TYPE_JSARRAY;
      myDataSource.responseSchema = {
      fields: ["areacode","state"]
      };
      var myDataTable = new
      YAHOO.widget.DataTable("scroll",myColumnSet,myDataSource,{scrollable:true});

      myDataTable.subscribe('cellMousedownEvent',makeDraggable);
      }


      var makeDraggable=function(oArgs) {
      new
      YAHOO.example.DDList(oArgs.target.id);
      };

      //////////////////////////////////////////////////////////////////////////////
      // custom drag and drop implementation

      //////////////////////////////////////////////////////////////////////////////
      YAHOO.example.DDList = function(id, sGroup,
      config) {


      YAHOO.example.DDList.superclass.constructor.call(this,
      id, sGroup, config);

      //DDM.refreshCache();
      var el = this.getDragEl();
      alert("DragEl "+el.innerHTML+" "+el.id);
      alert("GetEl
      "+this.getEl().innerHTML+" "+this.getEl().id);
      Dom.setStyle(el, "opacity", 0.67);
      // The proxy is slightly transparent

      this.goingUp = false;
      this.lastY = 0;
      };

      YAHOO.extend(YAHOO.example.DDList,
      YAHOO.util.DDProxy, {

      startDrag: function(x, y) {

      // 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;
      //alert("startDrag");

      Dom.setStyle(dragEl, "color",
      Dom.getStyle(clickEl, "color"));
      Dom.setStyle(dragEl,
      "backgroundColor", Dom.getStyle(clickEl,
      "backgroundColor"));
      Dom.setStyle(dragEl, "border",
      "2px solid gray");
      },

      endDrag: function(e) {

      alert("endDrag");
      var srcEl = this.getEl();
      var proxy = this.getDragEl();
      //alert(Dom.getXY(srcEl));
      //alert(Dom.getXY(proxy));
      //alert(proxy.innerHTML);
      // 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();
      },

      onDragDrop: function(e, id) {

      alert("OnDragDrop");
      // 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) {

      //alert("OnDrag");
      // 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) {

      //alert("OnDragOver");
      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();
      }
      }
      });


      YAHOO.util.Event.onAvailable('scroll',function(){initTable()});

      *******END OF CODE ***********************

      My code works fine as far as the datatable is not
      scrolled.Once I move the scrollbar a bit.The drag
      functionality ceases to work.
      I found out that the startDrag is not triggered when
      the table is scrolled.
      This may be the bug in scrollable datatable api as it
      purely depends upon css for attaining the scroll.
      Please help me in fixing this problem.

      Thanks and Regards,
      Shadab.


      Did you know? You can CHAT without downloading messenger. Click here http://in.messenger.yahoo.com/webmessengerpromo.php
    Your message has been successfully submitted and would be delivered to recipients shortly.