wright67uk Posted January 22, 2012 Share Posted January 22, 2012 I have a very basic page which I have mocked up to use as a referance point; www.1pw.co.uk/drag.html Page works in IE What I would like to do is to; 1) change the value of the image of my products from 'No' to 'Yes' when it enters the red square 2) pull some further info from a database about each of the products which have a value of 'Yes' . ie price, size etc. and display the info below the red box. Im guessing the first point would involve mapping out some co-ordinates. Could anyone explain a theory behind the correct way of doing this. Could anyone guide me to a decent tutorial or step by step guide? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drag and Drop</title> <style> <!-- .drag{position:relative;cursor:hand} #box {width:200px; height:200px; margin-right:auto; margin-left:auto; background-color:#F00;} --></style> <script language="JavaScript1.2"> <!-- /* Drag and Drop Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ var dragapproved=false var z,x,y function move(){ if (event.button==1&&dragapproved){ z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false } } function drags(){ if (!document.all) return if (event.srcElement.className=="drag"){ dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=move } } document.onmousedown=drags document.onmouseup=new Function("dragapproved=false") //--> </script> </head> <body> <img src="star.png" class="drag" value="no"/> <img src="grass.png" class="drag" value="no"/> <div id="box"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
joel24 Posted January 22, 2012 Share Posted January 22, 2012 have a look at jQuery UI's droppable() function. There is a lot of documentation to help you on your way! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.