By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,654 Members | 1,816 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,654 IT Pros & Developers. It's quick & easy.

image dragging

P: 56
i am trying to write a code which drags an image, but it is not working and i don't know the reason
here is the code:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  5.     <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.         <title>dragImage</title>
  8.         <meta name="author" content="engy" />
  9.         <!-- Date: 2015-02-17 -->
  10.     </head>
  11.     <body>
  12.         <!--<img src="bbe.jpg" style="width:104px;height:128px">-->
  13.         <!-- <img id = "img" src="bbe.jpg" style="position:absolute; TOP:posY; LEFT:posX; WIDTH:50px; HEIGHT:50px"> -->
  14.         <!--top=y=155px;left=x=70px;-->
  15.         <img onmouseup="up()" onmousedown="down()" id = "img" src="bbe.jpg" draggable="true" width="50" height="50">
  16.  
  17.     <script>
  18.         var flagdown = 0;
  19.     </script>
  20.     <script>
  21.         function up() {
  22.  
  23.             flagdown = 0;
  24.         }
  25.  
  26.         function down() {
  27.             //document.write("jk");
  28.             flagdown = 1;
  29.         }
  30.  
  31.         function move(e) {
  32.             if (flagdown == 1) {
  33.                 var posX = e.clientX;
  34.                 var posY = e.clientY;
  35.                 document.getElementById("img").style.marginLeft = posX;
  36.                 document.getElementById("img").style.marginTop = posY;
  37.             }
  38.  
  39.         }
  40.         document.onmousemove = move;
  41.         // document.getElementById("img").onmouseup = up;
  42.         // document.getElementById("img").onmousedown = down;
  43.  
  44.     </script>
  45.  
  46.  
  47.     </body>
  48. </html>
  49.  
  50.  
Feb 19 '15 #1
Share this Question
Share on Google+
1 Reply


Claus Mygind
100+
P: 571
Here's the code I use to move a <div> container around the screen. You can probably adopt that to your image.

You could start by putting your image in a <div id='mydiv'> </div> container. If you get that working then just apply the drag and drop to the image tag itself.

It uses double click to start dragging and mouseUp to stop draging. You could alter those events to your own specifications.

Expand|Select|Wrap|Line Numbers
  1. /*
  2. Moveable scratch pad <div>
  3.  
  4. usage: onmousedown and onmouseup event listeners added to <div>
  5.  
  6.         '<div '+
  7.         '  id="scratchPad" '+
  8.         '  ondblclick="dragScratchPad.startMoving(event);" '+ 
  9.         '  onmouseup="dragScratchPad.stopMoving();"'+
  10.         '> '+
  11. */
  12. var dragScratchPad = function(){
  13.     return {
  14.         move : function(divid,xpos,ypos){
  15.             var a = document.getElementById(divid);
  16.             document.getElementById(divid).style.left = xpos + 'px';
  17.             document.getElementById(divid).style.top = ypos + 'px';
  18.         },
  19.         startMoving : function(evt, pad){
  20.             evt = evt || window.event;
  21.             var posX = evt.clientX,
  22.                 posY = evt.clientY,
  23.                 a = document.getElementById(pad),
  24.             divTop = a.style.top,
  25.             divLeft = a.style.left;
  26.             divTop = divTop.replace('px','');
  27.             divLeft = divLeft.replace('px','');
  28.             var diffX = posX - divLeft,
  29.                 diffY = posY - divTop;
  30.             document.onmousemove = function(evt){
  31.                 evt = evt || window.event;
  32.                 var posX = evt.clientX,
  33.                     posY = evt.clientY,
  34.                     aX = posX - diffX,
  35.                     aY = posY - diffY;
  36.                 dragScratchPad.move(pad,aX,aY);
  37.             }
  38.         },
  39.         stopMoving : function(){
  40.             var a = document.createElement('script');
  41.             document.onmousemove = function(){}
  42.         },
  43.     }
  44. }();
  45.  
  46.  
Feb 20 '15 #2

Post your reply

Sign in to post your reply or Sign up for a free account.