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> Link to comment https://forums.phpfreaks.com/topic/255549-calling-info-from-mysql-based-on-a-drag-and-dropped-location/ 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! Link to comment https://forums.phpfreaks.com/topic/255549-calling-info-from-mysql-based-on-a-drag-and-dropped-location/#findComment-1310136 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.