drag using javascript and css

Question

I want to create a web page in which a specific image is capable to drag.

so this was my code.

<! doctype html>

<html>
<head>
    <title>

    </title>
   <script src="13.8.js"></script>
</head>
<body>
    <img src="file:\\C:\Users\X555\Pictures\poster\yellowflowers.png" id="image" alt="white lion">

    <script>
        var mustDrag;
        var image


        function set() {
            image = document.getElementById("image");
            image.addEventListener("mousedown", function () { mustDrag = true }, false);
            window.addEventListener("mouseup", function () { mustDrag = false; }, false);


            window.addEventListener("mousemove", drag, false);
        }

        function drag(e) {

            if (mustDrag) {
                e.target.style.position = 'absolute';
                e.target.style.left = Number(e.x);
                e.target.style.top = Number(e.y);
            }

        }
        window.addEventListener("load", set, false);
    </script>
</body>
</html>

but it doesn't function correctly .sometimes it drag whit it shouldn't. and usually throw the image in lower-left side of the window while it mustn't. I don't realize at all that whats wrong with this code?

Shrinath · Accepted Answer · 2015-09-28 08:39:53Z

3

Refer this Example, hope you will get your answer

	function startDrag(e) {
				// determine event object
				if (!e) {
					var e = window.event;
				}
                if(e.preventDefault) e.preventDefault();

				// IE uses srcElement, others use target
				targ = e.target ? e.target : e.srcElement;

				if (targ.className != 'dragme') {return};
				// calculate event X, Y coordinates
					offsetX = e.clientX;
					offsetY = e.clientY;

				// assign default values for top and left properties
				if(!targ.style.left) { targ.style.left='0px'};
				if (!targ.style.top) { targ.style.top='0px'};

				// calculate integer values for top and left 
				// properties
				coordX = parseInt(targ.style.left);
				coordY = parseInt(targ.style.top);
				drag = true;

				// move div element
					document.onmousemove=dragDiv;
                return false;
				
			}
			function dragDiv(e) {
				if (!drag) {return};
				if (!e) { var e= window.event};
				// var targ=e.target?e.target:e.srcElement;
				// move div element
				targ.style.left=coordX+e.clientX-offsetX+'px';
				targ.style.top=coordY+e.clientY-offsetY+'px';
				return false;
			}
			function stopDrag() {
				drag=false;
			}
			window.onload = function() {
				document.onmousedown = startDrag;
				document.onmouseup = stopDrag;
			}

 .dragme{
			position:relative;
			width: 270px;
			height: 203px;
			cursor: move;
		}
	#draggable {
			background-color: #ccc;
			border: 1px solid #000;
		}

   
<img src="https://lh4.googleusercontent.com/-8tqTFxi2ebU/Ufo4j_thf7I/AAAAAAAADFM/_ZBQctm9e8E/w270-h203-no/flower.jpg" alt="drag-and-drop image script" 
 title="drag-and-drop image script" class="dragme">

 <div id="draggable" class="dragme">Test </div>

answered Sep 28, 2015 at 8:39

Shrinath

3621 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

om_jaipur Over a year ago

I really appreciate Shrinath, I'm searching this type of code from a long time, a lot of thanks for it.

Masood Moghini Over a year ago

thank Shrinath but there are two problems yet. 1-I don't know jQuery yet so I don't know what offsetX is . 2-then my dominant problem is with "what's wrong in my code".It seems for me every thing is correct but it isn't .where is the mistake of code?

Masood Moghini Over a year ago

I think I find it .I must subtract canvas.offsetLeft from the clientx

Collectives™ on Stack Overflow

drag using javascript and css

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related