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

Help needed with additional functionality for drag and drop utility

Expand Messages
  • Vakil,Ashka A
    Hello, I am creating a drag-drop functionality in which the user can drag any image from the list of images present on left side into a specific area on the
    Message 1 of 2 , Nov 1, 2007
    • 0 Attachment
      Hello,

      I am creating a drag-drop functionality in which the user can drag any
      image from the list of images present on left side into a specific
      area on the page. If the user drops the dragged image in area other
      than the specified area, the image moves back to its old position.
      Also I am using proxy to move the image. Code for this functionality
      is as below (f1 is the id for the image to be moved and dragBox is the
      area where it should be dropped):

      <script type="text/javascript">
      (function() {

      var dd, dd2, clickRadius = 30, startPos,
      Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;

      YAHOO.util.Event.onDOMReady(function() {

      var el = Dom.get("f1");
      startPos = Dom.getXY(el);
      dd = new YAHOO.util.DDProxy(el);

      // our custom click validator let's us prevent clicks outside
      // of the circle (but within the element) from initiating a
      // drag.
      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
      var dragareaElement = document.getElementById("dragBox");
      if(dragareaElement.innerHTML != null){
      dragareaElement.innerHTML = "";
      }
      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("dragBox");

      });

      })();
      </script>

      I dont want my actual image to be dropped into the area but want a
      copy of image. Also when user drops another image into this area then
      the previous image is hidden. Is it possible to do so. Any guidance
      would be helpful.

      Thank you.

      Cheers,
      Ashka
    • saad_er55
      ... any ... functionality ... the ... outside ... initiating a ... fit ... does not ... r*r ); ... document.getElementById( dragBox ); ... { ... = ; ... then
      Message 2 of 2 , Nov 1, 2007
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "Vakil,Ashka A" <ashka_v@...>
        wrote:
        >
        > Hello,
        >
        > I am creating a drag-drop functionality in which the user can drag
        any
        > image from the list of images present on left side into a specific
        > area on the page. If the user drops the dragged image in area other
        > than the specified area, the image moves back to its old position.
        > Also I am using proxy to move the image. Code for this
        functionality
        > is as below (f1 is the id for the image to be moved and dragBox is
        the
        > area where it should be dropped):
        >
        > <script type="text/javascript">
        > (function() {
        >
        > var dd, dd2, clickRadius = 30, startPos,
        > Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;
        >
        > YAHOO.util.Event.onDOMReady(function() {
        >
        > var el = Dom.get("f1");
        > startPos = Dom.getXY(el);
        > dd = new YAHOO.util.DDProxy(el);
        >
        > // our custom click validator let's us prevent clicks
        outside
        > // of the circle (but within the element) from
        initiating a
        > // drag.
        > 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
        > var dragareaElement =
        document.getElementById("dragBox");
        > if(dragareaElement.innerHTML != null)
        {
        > dragareaElement.innerHTML
        = "";
        > }
        > 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("dragBox");
        >
        > });
        >
        > })();
        > </script>
        >
        > I dont want my actual image to be dropped into the area but want a
        > copy of image. Also when user drops another image into this area
        then
        > the previous image is hidden. Is it possible to do so. Any guidance
        > would be helpful.
        >
        > Thank you.
        >
        > Cheers,
        > Ashka
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.