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

Re: Help needed with additional functionality for drag and drop utility

Expand Messages
  • saad_er55
    ... any ... functionality ... the ... outside ... initiating a ... fit ... does not ... r*r ); ... document.getElementById( dragBox ); ... { ... = ; ... then
    Message 1 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.