Reply to thread

Message

<blockquote data-quote="Core" data-source="post: 10769236" data-attributes="member: 263471">You can use this method on your blog to make any item drag-able.can you see this bunch of code&lt;div&gt;&lt;img src=&quot;.jpg&quot; alt=&quot;earth&quot; title=&quot;earth&quot; id='divStyle' /&gt;&lt;/div&gt;so insert your elements which need to be dragged instead image.and make its name divStyle.Copy paste onto note pad and save it with .html extension.that's all.Don't steal my codes without my permission. [CODE]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;style type='text/css'&gt;&nbsp; &nbsp; &nbsp; &nbsp; #divStyle{&nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; //background-color:red;&nbsp; &nbsp; &nbsp; &nbsp; //width:50px;&nbsp; &nbsp; &nbsp; &nbsp; //border:solid 2px;&nbsp; &nbsp; &nbsp; &nbsp; //border-color:black;&nbsp; &nbsp; &nbsp; &nbsp; cursor:pointer;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type='text/javascript'&gt;&nbsp; &nbsp; &nbsp; &nbsp; document.onmousedown = mouseDown;&nbsp; &nbsp; &nbsp; &nbsp; document.onmouseup = mouseUp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function mouseDown(event)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; //check the browser&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(window.event)//for IE browser&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //get the event trigged object&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ObjEvent = event.srcElement;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else if(event.which)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //for FF/Safari/Opera/ browser&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ObjEvent = event.target;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //check it got the appropriate object&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(ObjEvent.id = &quot;divStyle&quot; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //then get the left top positions of the object&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; objLeft = parseInt(ObjEvent.style.left);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; objTop = parseInt(ObjEvent.style.top);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //get the mouse pointer's positions on the screen but on the object&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cltX = event.clientX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cltY = event.clientY;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //then call for the move event when it's needed&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.onmousemove = mouseMove;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function mouseMove(event)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //get the current location of the moving&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentX = event.clientX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentY = event.clientY;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //set the new location of the object which will be redraw in each time when items is being moved&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ObjEvent.style.left = objLeft+(currentX - cltX )+ &quot;px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ObjEvent.style.top = objTop+(currentY - cltY)+ &quot;px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function mouseUp(event)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.onmousemove = null;//cancel the moving&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; document.onmousedown = mouseDown;&nbsp; &nbsp; &nbsp; &nbsp; document.onmouseup = mouseUp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;/head&gt;&lt;body&gt;&nbsp; &nbsp; &lt;div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;.jpg&quot; alt=&quot;earth&quot; title=&quot;earth&quot;&nbsp; id='divStyle' /&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;script type='text/javascript'&gt;&nbsp; &nbsp; &nbsp; &nbsp; //set the initial location&nbsp; &nbsp; &nbsp; &nbsp; ObjEvent = document.getElementById(&quot;divStyle&quot;);&nbsp; &nbsp; &nbsp; &nbsp; ObjEvent.style.left = &quot;100px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; ObjEvent.style.top = &quot;150px&quot;;&nbsp; &nbsp; &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]By CORE/ 2010/05/20 Originally was writtenMade on Elakiri.com on 2011/08/01</blockquote>

[QUOTE="Core, post: 10769236, member: 263471"] [B]You can use this method on your blog to make any item drag-able. can you see this bunch of code <div> <img src=".jpg" alt="earth" title="earth" id='divStyle' /> </div> so insert your elements which need to be dragged instead image. and make its name divStyle. Copy paste onto note pad and save it with .html extension. that's all. [/B] Don't steal my codes without my permission. [CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type='text/css'> #divStyle{ position:absolute; //background-color:red; //width:50px; //border:solid 2px; //border-color:black; cursor:pointer; } </style> <script type='text/javascript'> document.onmousedown = mouseDown; document.onmouseup = mouseUp; function mouseDown(event) { //check the browser if(window.event)//for IE browser { //get the event trigged object ObjEvent = event.srcElement; }else if(event.which) { //for FF/Safari/Opera/ browser ObjEvent = event.target; } //check it got the appropriate object if(ObjEvent.id = "divStyle" ) { //then get the left top positions of the object objLeft = parseInt(ObjEvent.style.left); objTop = parseInt(ObjEvent.style.top); //get the mouse pointer's positions on the screen but on the object cltX = event.clientX; cltY = event.clientY; //then call for the move event when it's needed document.onmousemove = mouseMove; } return false; } function mouseMove(event) { //get the current location of the moving currentX = event.clientX; currentY = event.clientY; //set the new location of the object which will be redraw in each time when items is being moved ObjEvent.style.left = objLeft+(currentX - cltX )+ "px"; ObjEvent.style.top = objTop+(currentY - cltY)+ "px"; return false; } function mouseUp(event) { document.onmousemove = null;//cancel the moving return false; } document.onmousedown = mouseDown; document.onmouseup = mouseUp; </script> </head> <body> <div> <img src=".jpg" alt="earth" title="earth" id='divStyle' /> </div> <script type='text/javascript'> //set the initial location ObjEvent = document.getElementById("divStyle"); ObjEvent.style.left = "100px"; ObjEvent.style.top = "150px"; </script> </body> </html>[/CODE][B][SIZE=3]By CORE/ 2010/05/20 Originally was written Made on Elakiri.com on 2011/08/01[/SIZE][/B] [/QUOTE]

Verification

Dawasata paya keeyak thibeda?

Search

Latest ads

Reply to thread