Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drag and Drop Query

    Hi I am new to javascript coding and was wondering if it is possible to create a code where you drag an object into the correct box to determine if it has been placed in the right box.

    I am working on placement for a health and fitness company and they want a diagram of a heart where you drag the correct names to the right area of the heart. Would this be possible to be done in Javascript and if so how would I go about this?

    Any help you can give me would be greatly appreciated.

  • #2
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    See the script of this demo page on which image and paragraphs (with the class drag) are drag-able...

    To work with the drop position, you dispose (in the onmouseup function) of the object trgObj (this.trgObj see the alert) and his offsetLeft and offsetTop properties which give the coordinate in the positioned container pge.

  • Users who have thanked 007julien for this post:

    scotty1120 (02-21-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help but once thats done it still wouldnt tell me if for example I had moved the label saying left ventricle to the correct box with that code? I need to ensure that all labels are moved to the correct box if that makes sense?

  • #4
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    For each name, you have only to store the target position (positions to reach) an to calculate the distance with the drop position. If the distance(*) is less than few pixels (3, 7 or 15px, it depends of the scale), the script takes the target coordinates instead of the proposed by the user to let the name at the right place, otherwise the image is returned to its original position (which is given by this.ox and this.oy)...

    Code:
    // For example you define the names (a comma separated string to split in an array)
    var arrNames="Aorta,Vena cava,right atrium,...".split(',');
    // And the coordinates to reach  (two values for each name - example only)
    var arrLeftTop="256,42,387,59,789,25,...".split(',');
    // You build you movable names to display in the page 
    str='';
    for (var i=0;i<arrNames.length;ii++) str+='<p id="nms'+i+'" class="drag">'+arrNames[i]+'</p>';
    document.getElementById("pge").innerHTML=str;
    When the user drag a name, you have only (in the mouseup function) to find its id this.trgObj.id which gives the value of its index
    var index=Number(this.trgObj.id.substr(3));

    and, finally, compare this.trgObj.offsetLeft and this.trgObj.offsetTop with arrLftTop[2*i] and arrLftTop[2*i+1] the corresponding coordinates where the name should be placed (a variant with an array of object with three keys name, left and top would be more readable).

    See too the HTML tags map and area which could perhaps be useful...

    You can choose many distances like : the Euclidian Math.sqrt(deltaLeft*deltaLeft+deltaTop*deltaTop) or others Math.abs(deltaLeft)+Math.abs(deltaTop) or Math.abs(deltaLeft+deltaTop)+Math.abs(deltaLeft-deltaTop)
    Last edited by 007julien; 02-21-2013 at 08:24 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •