Drag and Drop Query

[scotty1120]

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.

[007julien]

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.

[scotty1120]

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?

[007julien]

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)...

// 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)