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

30159TabViews and Drag Drop with boundaries doesn't mix well

Expand Messages
  • pdspencer75
    May 1, 2008
    • 0 Attachment
      I have a drag and drop in region working, but when I add it within my
      TabViews the drag and drop elements get moved to the top of the tab by
      element-beta-min.js. This is what I want and would expect. But now
      when I move the draggable element it's boundary is still in the
      original place farther down the page (before element-beta-min.js moved
      the div placement).

      I don't know much about element-beta-min.js, so I'm assuming that is
      the culprit. If you resize the window, then the draggable element
      boundaries are recalculated and everything works fine.

      So the question is: how do I dynamically recalculate the draggable
      boundary whenever I change tabs? An on click on the tab is too soon,
      the div hasn't been repositioned yet. I've even tried an onClick on
      the draggable element itself but I get unexpected boundaries at that
      point.

      Any ideas? You can see this in FireFox. IE has an even worse affect.

      - Paul

      Here's the code.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>

      <!-- Dependencies -->
      <!-- Sam Skin CSS for TabView -->
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.1/build/tabview/assets/skins/sam/tabview.css">
      <link
      href="http://yui.yahooapis.com/2.5.1/build/tabview/assets/border_tabs.css"
      rel="Stylesheet" type="text/css" />

      <!-- JavaScript Dependencies for Tabview: -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>

      <!-- OPTIONAL: Connection (required for dynamic loading of data) -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>

      <!-- Source file for TabView -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/tabview/tabview-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js"
      ></script>

      <!-- My stuff -->

      <style>
      .dd-demo {
      position: relative;
      text-align: center;
      color: #fff;
      cursor: move;
      height: 60px;
      width: 60px;
      padding: 0;
      margin: 0;
      }

      .dd-demo div {
      border: 1px solid black;
      height: 58px;
      width: 58px;
      }

      #dd-demo-canvas1 {
      position:relative;
      padding: 55px;
      background-color: #7E5B60;
      border: 1px solid black;
      }

      #dd-demo-1 {
      position:absolute;
      top:0px;
      left:0px;
      background-color:#6D739A;top:0px; left:0px;
      }
      </style>
      <script>
      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event,
      dd1;

      DDRegion = function(id, sGroup, config) {
      this.cont = config.cont;
      DDRegion.superclass.constructor.apply(this, arguments);
      };

      YAHOO.extend(DDRegion, YAHOO.util.DD, {
      cont: null,
      init: function() {
      //Call the parent's init method
      DDRegion.superclass.init.apply(this, arguments);
      this.initConstraints();
      },
      initConstraints: function() {
      //Get the top, right, bottom and left positions
      var region = Dom.getRegion(this.cont);

      //Get the element we are working on
      var el = this.getEl();

      //Get the xy position of it
      var xy = Dom.getXY(el);

      //Get the width and height
      var width = parseInt(Dom.getStyle(el, 'width'), 10);
      var height = parseInt(Dom.getStyle(el, 'height'), 10);

      //Set left to x minus left
      var left = xy[0] - region.left;

      //Set right to right minus x minus width
      var right = region.right - xy[0] - width;

      //Set top to y minus top
      var top = xy[1] - region.top;

      //Set bottom to bottom minus y minus height
      var bottom = region.bottom - xy[1] - height;

      //Set the constraints based on the above calculations
      this.setXConstraint(left, right);
      this.setYConstraint(top, bottom);

      Event.on(window, 'resize', function() {
      this.initConstraints();
      }, this, true);
      }
      });

      Event.onDOMReady(function() {
      dd1 = new DDRegion('dd-demo-1', '', { cont: 'dd-demo-canvas1' });
      });
      }) ();
      </script>
      <!-- End my stuff -->

      </head>

      <body>

      <script type="text/javascript">
      var profileTabs = new YAHOO.widget.TabView("myTabs");
      </script>

      <div id="contentDiv">
      <div id="myTabs" class="yui-navset">
      <ul class="yui-nav">
      <li class="selected"><a href="#first"><em>First
      Tab</em></a></li>
      <li><a href="#test"><em>Test</em></a></li>
      </ul>
      <div class="yui-content" style="width: 700px; height: 450px;">
      <div id="first" style="padding: 100px">Nothing here!!</div>
      <div id="test" style="padding: 100px">
      <div id="dd-demo-canvas1" style="width: 200px; height:
      120px">
      <div id="dd-demo-1" class="dd-demo">
      <div>
      123
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </body>
      </html>