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

Re: [ydn-javascript] TabViews and Drag and Drop with boundaries doesn't mix well

Expand Messages
  • Paul Spencer
    That does. I ll have to try it out. So using activeTabChange I will be able to set the constraints after the tab is showing? I assume the event timing is
    Message 1 of 2 , May 1, 2008
      That does.  I'll have to try it out.

      So using activeTabChange I will be able to set the constraints after the tab is showing?  I assume the event timing is different from a simple onClick on the tab link itself?

      Thanks for your help.

      - Paul

      On Thu, May 1, 2008 at 7:51 PM, Dav Glass <dav.glass@...> wrote:

      pdspencer75 --

      What I think you need to do is setup a listener on the TabView for activeTabChange

      Then make sure that your DD tab is the one that is showing, then call dd.initContraints() on it, so that the region gets calculated.

      The problem is that the region can't be calculated if the tab is not visible. The content portion of a TabView is set to display: none which means it has no size applied to it so the Region can't be calculated..

      Does that make sense?

      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: pdspencer75 <spencepd@...>
      To: ydn-javascript@yahoogroups.com
      Sent: Thursday, May 1, 2008 4:34:01 PM
      Subject: [ydn-javascript] TabViews and Drag and Drop with boundaries doesn't mix well

      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

      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?

      Not sure if this will post, but 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 -->

      <link rel="stylesheet" type="text/css"
      href="http://www.dev.photrade.com/css/drag_demo.css" />
      <script type="text/javascript"



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

      <div id="contentDiv">
      <div id="prefs_and_settings" class="yui-navset">
      <ul class="yui-nav">
      <li><a href="#first"><em>First Tab</em></a></li>
      <li class="selected"><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">


      Yahoo! Groups Links

    Your message has been successfully submitted and would be delivered to recipients shortly.