image dragging

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Norgy
    New Member
    • May 2013
    • 56
    #1

    image dragging

    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:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>dragImage</title>
		<meta name="author" content="engy" />
		<!-- Date: 2015-02-17 -->
	</head>
	<body>
		<!--<img src="bbe.jpg" style="width:104px;height:128px">-->
		<!-- <img id = "img" src="bbe.jpg" style="position:absolute; TOP:posY; LEFT:posX; WIDTH:50px; HEIGHT:50px"> -->
		<!--top=y=155px;left=x=70px;-->
		<img onmouseup="up()" onmousedown="down()" id = "img" src="bbe.jpg" draggable="true" width="50" height="50">
	
	<script>
		var flagdown = 0;
	</script>
	<script>
		function up() {

			flagdown = 0;
		}

		function down() {
			//document.write("jk");
			flagdown = 1;
		}

		function move(e) {
			if (flagdown == 1) {
				var posX = e.clientX;
				var posY = e.clientY;
				document.getElementById("img").style.marginLeft = posX;
				document.getElementById("img").style.marginTop = posY;
			}

		}
		document.onmousemove = move;
		// document.getElementById("img").onmouseup = up;
		// document.getElementById("img").onmousedown = down;
		
	</script>
	
	
	</body>
</html>
    Tags: None
    • Claus Mygind
      Contributor
      • Mar 2008
      • 571
      #2
      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.

      Code:
      /*
Moveable scratch pad <div>

usage: onmousedown and onmouseup event listeners added to <div>

		'<div '+
		'  id="scratchPad" '+
		'  ondblclick="dragScratchPad.startMoving(event);" '+ 
		'  onmouseup="dragScratchPad.stopMoving();"'+
		'> '+
*/
var dragScratchPad = function(){
    return {
        move : function(divid,xpos,ypos){
            var a = document.getElementById(divid);
            document.getElementById(divid).style.left = xpos + 'px';
            document.getElementById(divid).style.top = ypos + 'px';
        },
        startMoving : function(evt, pad){
            evt = evt || window.event;
            var posX = evt.clientX,
                posY = evt.clientY,
                a = document.getElementById(pad),
            divTop = a.style.top,
            divLeft = a.style.left;
            divTop = divTop.replace('px','');
            divLeft = divLeft.replace('px','');
            var diffX = posX - divLeft,
                diffY = posY - divTop;
            document.onmousemove = function(evt){
                evt = evt || window.event;
                var posX = evt.clientX,
                    posY = evt.clientY,
                    aX = posX - diffX,
                    aY = posY - diffY;
                dragScratchPad.move(pad,aX,aY);
            }
        },
        stopMoving : function(){
            var a = document.createElement('script');
            document.onmousemove = function(){}
        },
    }
}();

        Comment

        Previous template Next
        Working...