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

TabViews and Drag Drop with boundaries doesn't mix well

Expand Messages
  • pdspencer75
    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
    Message 1 of 1 , May 1 4:45 PM
      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

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

      - Paul

      Here's the code.


      <!-- Dependencies -->
      <!-- Sam Skin CSS for TabView -->
      <link rel="stylesheet" type="text/css"
      rel="Stylesheet" type="text/css" />

      <!-- JavaScript Dependencies for Tabview: -->
      <script type="text/javascript"
      <script type="text/javascript"

      <!-- OPTIONAL: Connection (required for dynamic loading of data) -->
      <script type="text/javascript"

      <!-- Source file for TabView -->
      <script type="text/javascript"
      <script type="text/javascript"

      <!-- My stuff -->

      .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 {
      padding: 55px;
      background-color: #7E5B60;
      border: 1px solid black;

      #dd-demo-1 {
      background-color:#6D739A;top:0px; left:0px;
      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event,

      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);
      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, true);

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



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

      <div id="contentDiv">
      <div id="myTabs" class="yui-navset">
      <ul class="yui-nav">
      <li class="selected"><a href="#first"><em>First
      <li><a href="#test"><em>Test</em></a></li>
      <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:
      <div id="dd-demo-1" class="dd-demo">
    Your message has been successfully submitted and would be delivered to recipients shortly.