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

Drag and Drop in variable windows

Expand Messages
  • Jeroen van Doorn
    Hello Everybody, New on this list, but already wrestling some days with the drag and drop library. I want to realise drag and drop in a scrollable window, but
    Message 1 of 2 , Apr 3, 2006
    • 0 Attachment
      Hello Everybody,

      New on this list, but already wrestling some days with the drag and drop library.

      I want to realise drag and drop in a scrollable window, but somehow, when I scroll, the elements
      don't jump within the original xTicks and yTicks array anymore...

      How I dit it.

      HTML++++++++++++++

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title>DragNDropTest</title>
      <link href="test.css" media="screen" rel="Stylesheet" type="text/css" />
      <script src="js/YAHOO.js" type="text/javascript"></script>
      <script src="js/event.js" type="text/javascript"></script>
      <script src="js/dom.js" type="text/javascript"></script>
      <script src="js/dragdropY.js" type="text/javascript"></script>
      <script type="text/javascript">
      function dragDropInit() {   
            Square = document.getElementById ("square1");
          dd = new YAHOO.util.DD("square1");
          dd.addInvalidHandleType("h3");
          dd.setXConstraint(1000, 1000, 100);
          dd.setYConstraint(500, 500, 25);
          dd.scroll = true;
      }

          YAHOO.util.Event.addListener(window, "load", dragDropInit);
         
      </script>
      </head>

      <body>
         
      <div id="main">
          <div id="ccparent">
              <div id="cc">
                  <div id="square1" class="square" style="top:275px; left:30px; height:50px;">
                          <small>Foo</small>
                  </div>
              </div>
          </div>
      </div>
      </body>
      </html>


      ++++++++++++++++++

      CSS ++++++++++++++

      #main {
          position:            relative;
          left:                200px;
      }

      #ccparent {
          position:            relative;
              height:           500px;
          width:                500px;
          overflow:            auto;
      }

      #cc {
          height:                500px;
          width:                1000px;
          overflow:            hidden;
          background:         url("grid.png") 0 -400px repeat-x;
      }

      .square {
          background:            #fff;
          border:                1px solid #ee9337;
          text-align:            center;
          color:                #000;
          cursor:                move;
          position:            absolute;
          width:                88px;
          opacity:             0.7;
          filter:             alpha(opacity=70);
          position:             absolute;
      }
      +++++++++++++++++

      It seems as if when I scroll, the ticks are messured from the visible side (to the left) instead of the already invisible real edge of the parent element.

      Hopefully someone know what I'm doing wrong or where I must hack to solve this...

      Kind regards and thanks in advance,
      Jeroen van Doorn


    • webgames00
      I have been having this problem as well. I am currently looking for a workaround.
      Message 2 of 2 , Feb 1, 2007
      • 0 Attachment
        I have been having this problem as well. I am currently looking for a
        workaround.
      Your message has been successfully submitted and would be delivered to recipients shortly.