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

With DragDrop, can't prevent original element from being moved when using proxy

Expand Messages
  • silikon2
    Hi. I m using Drag and Drop with a Proxy. The problem is, when using the proxy, the original element is positioned where the drop occurs, but I don t want
    Message 1 of 4 , Apr 26, 2007
    • 0 Attachment
      Hi.

      I'm using Drag and Drop with a Proxy. The problem is, when using the
      proxy, the original element is positioned where the drop occurs, but I
      don't want that to happen, I want the original element to stay or go
      back to where it started. The *only* way I've been able to get this
      to work is to use animation, but it produces (obviously) a noticeable
      visual effect that I don't want. Dom.setXY doesn't seem to work in
      the onDragDrop function, and yet animation does. The following is a
      pasted example based on the circle example that comes with the YUI
      framework. I've based my code on this and it exhibits the same
      behavior.

      Thanks, Will

      ---

      <!doctype html public "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>Yahoo! UI Library - Drag and Drop</title>
      <link rel="stylesheet" type="text/css" href="./css/screen.css">
      </head>
      <body>

      <script type="text/javascript" src="../../build/yahoo/yahoo-min.js"
      ></script>
      <script type="text/javascript" src="../../build/event/event-min.js"
      ></script>
      <script type="text/javascript" src="../../build/dom/dom-min.js"></script>
      <script type="text/javascript"
      src="../../build/logger/logger-min.js"></script>

      <script type="text/javascript"
      src="../../build/dragdrop/dragdrop-debug.js" ></script>

      <script type="text/javascript"
      src="../../build/animation/animation.js"></script>

      <script type="text/javascript">

      YAHOO.example.DDApp = function() {
      var dd;
      var clickRadius = 46, startPos = [105, 280];
      var Event=YAHOO.util.Event
      var Dom=YAHOO.util.Dom;

      return {
      init: function() {

      var el = Dom.get("dragDiv1");
      // Event.on(el, "selectstart", Event.preventDefault);

      dd = new YAHOO.util.DDProxy(el);

      dd.clickValidator = function(e) {

      // get the screen rectangle for the element
      var el = this.getEl();
      var region = Dom.getRegion(el);

      // get the radius of the largest circle that can fit
      inside
      // var w = region.right - region.left;
      // var h = region.bottom - region.top;
      // var r = Math.round(Math.min(h, w) / 2);
      //-or- just use a well-known radius
      var r = clickRadius;

      // get the location of the click
      var x1 = Event.getPageX(e), y1 = Event.getPageY(e);

      // get the center of the circle
      var x2 = Math.round((region.right+region.left)/2);
      var y2 = Math.round((region.top+region.bottom)/2);


      // I don't want text selection even if the click does not
      // initiate a drag
      Event.preventDefault(e);

      // check to see if the click is in the circle
      return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
      };

      dd.onDragDrop = function(e, id) {
      // center it in the square
      Dom.setXY(this.getEl(), Dom.getXY(id));
      }

      dd.onInvalidDrop = function(e) {
      // return to the start position
      // Dom.setXY(this.getEl(), startPos);

      // Animating the move is more intesting
      new YAHOO.util.Motion(
      this.id, {
      points: {
      to: startPos
      }
      },
      0.3,
      YAHOO.util.Easing.easeOut
      ).animate();

      }

      dd2 = new YAHOO.util.DDTarget("dragDiv2");
      }
      }
      } ();

      YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);

      </script>

      <style type="text/css">

      #dragDiv1 {
      background:url(img/circle.gif) 0 0 no-repeat;
      top:280px; left:105px;
      border:0px solid black;
      z-index:10;
      cursor:default;
      }

      #dragDiv2 {
      background:url(img/sq2.png) 0 0 no-repeat;
      background:#A0B9A6;top:390px; left:215px;
      border:0px solid black;
      cursor:default;
      }

      </style>

      <div id="pageTitle"><h3>Drag and Drop - YAHOO.util.DD</h3></div>


      <style type="text/css">

      /* logger default styles */
      /* font size is controlled here: default 77% */
      #yui-log
      {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
      /* width is controlled here: default 31em */
      .yui-log {background-color:#AAA;border:1px solid
      black;font-family:monospace;z-index:9000;}
      .yui-log p {margin:1px;padding:.1em;}
      .yui-log button {font-family:monospace;}
      .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
      /* height is controlled here: default 20em*/
      .yui-log .yui-log-bd
      {width:100%;height:20em;background-color:#FFF;border:1px solid
      gray;overflow:auto;}
      .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
      .yui-log .yui-log-ft .yui-log-categoryfilters {}
      .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px
      solid #575757;margin-top:.75em;padding-top:.75em;}
      .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
      .yui-log .yui-log-filtergrp {margin-right:.5em;}
      .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
      .yui-log .warn {background-color:#F58516;} /* F58516 orange */
      .yui-log .error {background-color:#E32F0B;} /* E32F0B red */
      .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
      .yui-log .window {background-color:#F2E886;} /* F2E886 tan */


      </style>


      <img id="ylogo" src="img/logo.gif" />

      <div id="container">
      <div id="containerTop">
      <div id="header">
      <h4> </h4>
      </div>
      <div id="main">

      <div id="rightbar">

      <div id="rightBarPad">
      <h3>Examples</h3>

      <div id="linkage">
      <ul>
      <li><a href="drag.html?mode=dist">Drag test</a></li>
      <li><a href="ontop.html?mode=dist">Always on top</a></li>
      <li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
      <li><a href="list.html?mode=dist">Sortable list</a> </li>
      <!--
      <li><a href="slider.html?mode=dist">Slider</a></li>
      -->
      <li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
      <li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
      <li><a href="grid.html?mode=dist">Grid</a></li>
      <li><a href="resize.html?mode=dist">Resize pane</a></li>
      <li><a href="circle.html?mode=dist">Custom click validator</a></li>

      </ul>
      </div>



      <script type="text/javascript">
      //<![CDATA[
      YAHOO.example.logApp = {

      reader: null,

      init: function() {
      if (YAHOO.widget.Logger) {
      this.reader = new YAHOO.widget.LogReader( "logDiv",
      { newestOnTop: true, height: "400px" } );

      this.reader._onClickPauseBtn(null, this.reader);
      }
      }
      };

      YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);

      //]]>
      </script>

      </h4>
      <div id="logDiv"></div>
      </div>


      </div>

      <div id="content">
      <form name="dragDropForm" action="javscript:;">
      <div class="newsItem">
      <h3>Custom Click Validator Implementation and onInvalidDrop</h3>
      <p>

      In this example, we override clickValidator to provide custom logic for
      determining if the initial mousedown should initiate a drag. A drag is
      initiated only if the mousedown happens inside of the circle.

      <br />

      In addition, the circle snaps back to its inital position if not
      dropped
      on a target. This is done by overriding the onInvalidDrop method.

      </p>

      <strong>The logger is paused for performance reasons. Click "Resume"
      to re-enable it.</strong>

      </div>
      </form>
      </div>

      <div id="footerContainer">
      <div id="footer">
      <p> </p>
      </div>
      </div>
      </div>
      </div>
      </div>


      <div id="dragDiv1" class="testSquare" ><br />DD</div>
      <div id="dragDiv2" class="testSquare" >DDTarget</div>

      </body>
      </html>
    • Daniel Nunes
      I use the following: DDHorario.prototype.endDrag = function(e) { Dom.setXY(this.id, [this.startPageX,this.startPageY]); if(this.draggedOver){
      Message 2 of 4 , Apr 26, 2007
      • 0 Attachment
        I use the following:

        DDHorario.prototype.endDrag = function(e) {
        Dom.setXY(this.id, [this.startPageX,this.startPageY]);
        if(this.draggedOver){
        DDM.getElement(this.draggedOver).className = this.offClass;

        }
        }
        DDHorario is an extended class from Proxy. =)

        --- In ydn-javascript@yahoogroups.com, "silikon2" <silikon2@...> wrote:
        >
        > Hi.
        >
        > I'm using Drag and Drop with a Proxy. The problem is, when using the
        > proxy, the original element is positioned where the drop occurs, but I
        > don't want that to happen, I want the original element to stay or go
        > back to where it started. The *only* way I've been able to get this
        > to work is to use animation, but it produces (obviously) a noticeable
        > visual effect that I don't want. Dom.setXY doesn't seem to work in
        > the onDragDrop function, and yet animation does. The following is a
        > pasted example based on the circle example that comes with the YUI
        > framework. I've based my code on this and it exhibits the same
        > behavior.
        >
        > Thanks, Will
        >
        > ---
        >
        > <!doctype html public "-//W3C//DTD HTML 4.01//EN"
        > "http://www.w3.org/TR/html4/strict.dtd">
        > <html>
        > <head>
        > <title>Yahoo! UI Library - Drag and Drop</title>
        > <link rel="stylesheet" type="text/css" href="./css/screen.css">
        > </head>
        > <body>
        >
        > <script type="text/javascript" src="../../build/yahoo/yahoo-min.js"
        > ></script>
        > <script type="text/javascript" src="../../build/event/event-min.js"
        > ></script>
        > <script type="text/javascript"
        src="../../build/dom/dom-min.js"></script>
        > <script type="text/javascript"
        > src="../../build/logger/logger-min.js"></script>
        >
        > <script type="text/javascript"
        > src="../../build/dragdrop/dragdrop-debug.js" ></script>
        >
        > <script type="text/javascript"
        > src="../../build/animation/animation.js"></script>
        >
        > <script type="text/javascript">
        >
        > YAHOO.example.DDApp = function() {
        > var dd;
        > var clickRadius = 46, startPos = [105, 280];
        > var Event=YAHOO.util.Event
        > var Dom=YAHOO.util.Dom;
        >
        > return {
        > init: function() {
        >
        > var el = Dom.get("dragDiv1");
        > // Event.on(el, "selectstart", Event.preventDefault);
        >
        > dd = new YAHOO.util.DDProxy(el);
        >
        > dd.clickValidator = function(e) {
        >
        > // get the screen rectangle for the element
        > var el = this.getEl();
        > var region = Dom.getRegion(el);
        >
        > // get the radius of the largest circle that can fit
        > inside
        > // var w = region.right - region.left;
        > // var h = region.bottom - region.top;
        > // var r = Math.round(Math.min(h, w) / 2);
        > //-or- just use a well-known radius
        > var r = clickRadius;
        >
        > // get the location of the click
        > var x1 = Event.getPageX(e), y1 = Event.getPageY(e);
        >
        > // get the center of the circle
        > var x2 = Math.round((region.right+region.left)/2);
        > var y2 = Math.round((region.top+region.bottom)/2);
        >
        >
        > // I don't want text selection even if the click
        does not
        > // initiate a drag
        > Event.preventDefault(e);
        >
        > // check to see if the click is in the circle
        > return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
        > };
        >
        > dd.onDragDrop = function(e, id) {
        > // center it in the square
        > Dom.setXY(this.getEl(), Dom.getXY(id));
        > }
        >
        > dd.onInvalidDrop = function(e) {
        > // return to the start position
        > // Dom.setXY(this.getEl(), startPos);
        >
        > // Animating the move is more intesting
        > new YAHOO.util.Motion(
        > this.id, {
        > points: {
        > to: startPos
        > }
        > },
        > 0.3,
        > YAHOO.util.Easing.easeOut
        > ).animate();
        >
        > }
        >
        > dd2 = new YAHOO.util.DDTarget("dragDiv2");
        > }
        > }
        > } ();
        >
        > YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
        >
        > </script>
        >
        > <style type="text/css">
        >
        > #dragDiv1 {
        > background:url(img/circle.gif) 0 0 no-repeat;
        > top:280px; left:105px;
        > border:0px solid black;
        > z-index:10;
        > cursor:default;
        > }
        >
        > #dragDiv2 {
        > background:url(img/sq2.png) 0 0 no-repeat;
        > background:#A0B9A6;top:390px; left:215px;
        > border:0px solid black;
        > cursor:default;
        > }
        >
        > </style>
        >
        > <div id="pageTitle"><h3>Drag and Drop - YAHOO.util.DD</h3></div>
        >
        >
        > <style type="text/css">
        >
        > /* logger default styles */
        > /* font size is controlled here: default 77% */
        > #yui-log
        > {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
        > /* width is controlled here: default 31em */
        > .yui-log {background-color:#AAA;border:1px solid
        > black;font-family:monospace;z-index:9000;}
        > .yui-log p {margin:1px;padding:.1em;}
        > .yui-log button {font-family:monospace;}
        > .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
        > /* height is controlled here: default 20em*/
        > .yui-log .yui-log-bd
        > {width:100%;height:20em;background-color:#FFF;border:1px solid
        > gray;overflow:auto;}
        > .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
        > .yui-log .yui-log-ft .yui-log-categoryfilters {}
        > .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px
        > solid #575757;margin-top:.75em;padding-top:.75em;}
        > .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
        > .yui-log .yui-log-filtergrp {margin-right:.5em;}
        > .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
        > .yui-log .warn {background-color:#F58516;} /* F58516 orange */
        > .yui-log .error {background-color:#E32F0B;} /* E32F0B red */
        > .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
        > .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
        >
        >
        > </style>
        >
        >
        > <img id="ylogo" src="img/logo.gif" />
        >
        > <div id="container">
        > <div id="containerTop">
        > <div id="header">
        > <h4> </h4>
        > </div>
        > <div id="main">
        >
        > <div id="rightbar">
        >
        > <div id="rightBarPad">
        > <h3>Examples</h3>
        >
        > <div id="linkage">
        > <ul>
        > <li><a href="drag.html?mode=dist">Drag test</a></li>
        > <li><a href="ontop.html?mode=dist">Always on top</a></li>
        > <li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
        > <li><a href="list.html?mode=dist">Sortable list</a> </li>
        > <!--
        > <li><a href="slider.html?mode=dist">Slider</a></li>
        > -->
        > <li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
        > <li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
        > <li><a href="grid.html?mode=dist">Grid</a></li>
        > <li><a href="resize.html?mode=dist">Resize pane</a></li>
        > <li><a href="circle.html?mode=dist">Custom click validator</a></li>
        >
        > </ul>
        > </div>
        >
        >
        >
        > <script type="text/javascript">
        > //<![CDATA[
        > YAHOO.example.logApp = {
        >
        > reader: null,
        >
        > init: function() {
        > if (YAHOO.widget.Logger) {
        > this.reader = new YAHOO.widget.LogReader( "logDiv",
        > { newestOnTop: true, height: "400px" } );
        >
        > this.reader._onClickPauseBtn(null, this.reader);
        > }
        > }
        > };
        >
        > YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
        >
        > //]]>
        > </script>
        >
        > </h4>
        > <div id="logDiv"></div>
        > </div>
        >
        >
        > </div>
        >
        > <div id="content">
        > <form name="dragDropForm" action="javscript:;">
        > <div class="newsItem">
        > <h3>Custom Click Validator Implementation and onInvalidDrop</h3>
        > <p>
        >
        > In this example, we override clickValidator to provide custom
        logic for
        > determining if the initial mousedown should initiate a drag. A
        drag is
        > initiated only if the mousedown happens inside of the circle.
        >
        > <br />
        >
        > In addition, the circle snaps back to its inital position if not
        > dropped
        > on a target. This is done by overriding the onInvalidDrop method.
        >
        > </p>
        >
        > <strong>The logger is paused for performance reasons. Click "Resume"
        > to re-enable it.</strong>
        >
        > </div>
        > </form>
        > </div>
        >
        > <div id="footerContainer">
        > <div id="footer">
        > <p> </p>
        > </div>
        > </div>
        > </div>
        > </div>
        > </div>
        >
        >
        > <div id="dragDiv1" class="testSquare" ><br />DD</div>
        > <div id="dragDiv2" class="testSquare" >DDTarget</div>
        >
        > </body>
        > </html>
        >
      • someguynameddylan
        Heya, That s the default behavior of the DDProxy. If you don t like it you ll have to override the onDragDrop method (i think, check with api docs) and insert
        Message 3 of 4 , Apr 26, 2007
        • 0 Attachment
          Heya,

          That's the default behavior of the DDProxy. If you don't like it you'll
          have to override the onDragDrop method (i think, check with api docs)
          and insert the code to produce your desired effect.

          Happy coding,

          Dylan


          --- In ydn-javascript@yahoogroups.com, "silikon2" <silikon2@...> wrote:
          >
          > Hi.
          >
          > I'm using Drag and Drop with a Proxy. The problem is, when using the
          > proxy, the original element is positioned where the drop occurs, but I
          > don't want that to happen, I want the original element to stay or go
          > back to where it started. The *only* way I've been able to get this
          > to work is to use animation, but it produces (obviously) a noticeable
          > visual effect that I don't want. Dom.setXY doesn't seem to work in
          > the onDragDrop function, and yet animation does. The following is a
          > pasted example based on the circle example that comes with the YUI
          > framework. I've based my code on this and it exhibits the same
          > behavior.
          >
          > Thanks, Will
          >
          > ---
          >
          > <!doctype html public "-//W3C//DTD HTML 4.01//EN"
          > "http://www.w3.org/TR/html4/strict.dtd">
          > <html>
          > <head>
          > <title>Yahoo! UI Library - Drag and Drop</title>
          > <link rel="stylesheet" type="text/css" href="./css/screen.css">
          > </head>
          > <body>
          >
          > <script type="text/javascript" src="../../build/yahoo/yahoo-min.js"
          > ></script>
          > <script type="text/javascript" src="../../build/event/event-min.js"
          > ></script>
          > <script type="text/javascript"
          src="../../build/dom/dom-min.js"></script>
          > <script type="text/javascript"
          > src="../../build/logger/logger-min.js"></script>
          >
          > <script type="text/javascript"
          > src="../../build/dragdrop/dragdrop-debug.js" ></script>
          >
          > <script type="text/javascript"
          > src="../../build/animation/animation.js"></script>
          >
          > <script type="text/javascript">
          >
          > YAHOO.example.DDApp = function() {
          > var dd;
          > var clickRadius = 46, startPos = [105, 280];
          > var Event=YAHOO.util.Event
          > var Dom=YAHOO.util.Dom;
          >
          > return {
          > init: function() {
          >
          > var el = Dom.get("dragDiv1");
          > // Event.on(el, "selectstart", Event.preventDefault);
          >
          > dd = new YAHOO.util.DDProxy(el);
          >
          > dd.clickValidator = function(e) {
          >
          > // get the screen rectangle for the element
          > var el = this.getEl();
          > var region = Dom.getRegion(el);
          >
          > // get the radius of the largest circle that can fit
          > inside
          > // var w = region.right - region.left;
          > // var h = region.bottom - region.top;
          > // var r = Math.round(Math.min(h, w) / 2);
          > //-or- just use a well-known radius
          > var r = clickRadius;
          >
          > // get the location of the click
          > var x1 = Event.getPageX(e), y1 = Event.getPageY(e);
          >
          > // get the center of the circle
          > var x2 = Math.round((region.right+region.left)/2);
          > var y2 = Math.round((region.top+region.bottom)/2);
          >
          >
          > // I don't want text selection even if the click does not
          > // initiate a drag
          > Event.preventDefault(e);
          >
          > // check to see if the click is in the circle
          > return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
          > };
          >
          > dd.onDragDrop = function(e, id) {
          > // center it in the square
          > Dom.setXY(this.getEl(), Dom.getXY(id));
          > }
          >
          > dd.onInvalidDrop = function(e) {
          > // return to the start position
          > // Dom.setXY(this.getEl(), startPos);
          >
          > // Animating the move is more intesting
          > new YAHOO.util.Motion(
          > this.id, {
          > points: {
          > to: startPos
          > }
          > },
          > 0.3,
          > YAHOO.util.Easing.easeOut
          > ).animate();
          >
          > }
          >
          > dd2 = new YAHOO.util.DDTarget("dragDiv2");
          > }
          > }
          > } ();
          >
          > YAHOO.util.Event.addListener(window, "load",
          YAHOO.example.DDApp.init);
          >
          > </script>
          >
          > <style type="text/css">
          >
          > #dragDiv1 {
          > background:url(img/circle.gif) 0 0 no-repeat;
          > top:280px; left:105px;
          > border:0px solid black;
          > z-index:10;
          > cursor:default;
          > }
          >
          > #dragDiv2 {
          > background:url(img/sq2.png) 0 0 no-repeat;
          > background:#A0B9A6;top:390px; left:215px;
          > border:0px solid black;
          > cursor:default;
          > }
          >
          > </style>
          >
          > <div id="pageTitle"><h3>Drag and Drop - YAHOO.util.DD</h3></div>
          >
          >
          > <style type="text/css">
          >
          > /* logger default styles */
          > /* font size is controlled here: default 77% */
          > #yui-log
          > {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
          > /* width is controlled here: default 31em */
          > .yui-log {background-color:#AAA;border:1px solid
          > black;font-family:monospace;z-index:9000;}
          > .yui-log p {margin:1px;padding:.1em;}
          > .yui-log button {font-family:monospace;}
          > .yui-log .yui-log-hd
          {padding:.5em;background-color:#575757;color:#FFF;}
          > /* height is controlled here: default 20em*/
          > .yui-log .yui-log-bd
          > {width:100%;height:20em;background-color:#FFF;border:1px solid
          > gray;overflow:auto;}
          > .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
          > .yui-log .yui-log-ft .yui-log-categoryfilters {}
          > .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px
          > solid #575757;margin-top:.75em;padding-top:.75em;}
          > .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
          > .yui-log .yui-log-filtergrp {margin-right:.5em;}
          > .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
          > .yui-log .warn {background-color:#F58516;} /* F58516 orange */
          > .yui-log .error {background-color:#E32F0B;} /* E32F0B red */
          > .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
          > .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
          >
          >
          > </style>
          >
          >
          > <img id="ylogo" src="img/logo.gif" />
          >
          > <div id="container">
          > <div id="containerTop">
          > <div id="header">
          > <h4> </h4>
          > </div>
          > <div id="main">
          >
          > <div id="rightbar">
          >
          > <div id="rightBarPad">
          > <h3>Examples</h3>
          >
          > <div id="linkage">
          > <ul>
          > <li><a href="drag.html?mode=dist">Drag test</a></li>
          > <li><a href="ontop.html?mode=dist">Always on top</a></li>
          > <li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
          > <li><a href="list.html?mode=dist">Sortable list</a> </li>
          > <!--
          > <li><a href="slider.html?mode=dist">Slider</a></li>
          > -->
          > <li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
          > <li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
          > <li><a href="grid.html?mode=dist">Grid</a></li>
          > <li><a href="resize.html?mode=dist">Resize pane</a></li>
          > <li><a href="circle.html?mode=dist">Custom click validator</a></li>
          >
          > </ul>
          > </div>
          >
          >
          >
          > <script type="text/javascript">
          > //<![CDATA[
          > YAHOO.example.logApp = {
          >
          > reader: null,
          >
          > init: function() {
          > if (YAHOO.widget.Logger) {
          > this.reader = new YAHOO.widget.LogReader( "logDiv",
          > { newestOnTop: true, height: "400px" } );
          >
          > this.reader._onClickPauseBtn(null, this.reader);
          > }
          > }
          > };
          >
          > YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
          >
          > //]]>
          > </script>
          >
          > </h4>
          > <div id="logDiv"></div>
          > </div>
          >
          >
          > </div>
          >
          > <div id="content">
          > <form name="dragDropForm" action="javscript:;">
          > <div class="newsItem">
          > <h3>Custom Click Validator Implementation and onInvalidDrop</h3>
          > <p>
          >
          > In this example, we override clickValidator to provide custom logic
          for
          > determining if the initial mousedown should initiate a drag. A drag is
          > initiated only if the mousedown happens inside of the circle.
          >
          > <br />
          >
          > In addition, the circle snaps back to its inital position if not
          > dropped
          > on a target. This is done by overriding the onInvalidDrop method.
          >
          > </p>
          >
          > <strong>The logger is paused for performance reasons. Click "Resume"
          > to re-enable it.</strong>
          >
          > </div>
          > </form>
          > </div>
          >
          > <div id="footerContainer">
          > <div id="footer">
          > <p> </p>
          > </div>
          > </div>
          > </div>
          > </div>
          > </div>
          >
          >
          > <div id="dragDiv1" class="testSquare" ><br />DD</div>
          > <div id="dragDiv2" class="testSquare" >DDTarget</div>
          >
          > </body>
          > </html>
          >
        • silikon2
          Similar to what was suggested, I overrode the endDrag event to a blank function and it did the trick. Thanks guys. W
          Message 4 of 4 , Apr 27, 2007
          • 0 Attachment
            Similar to what was suggested, I overrode the endDrag event to a blank
            function and it did the trick.

            Thanks guys.

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