Drag img and div

Question

There is a code

document.onmousedown = function(event) { var tar = event.target; if (tar.tagName != 'IMG' && tar.tagName != 'DIV') return; tar.style.position = 'absolute'; document.onmousemove = function(event) { tar.style.left = event.pageX - 20 + 'px'; tar.style.top = event.pageY - 20 + 'px'; } tar.onmouseup = function() { document.onmousemove = tar.onmouseup = null; } tar.ondragstart = function() { return false; } }

 body { height: 2000px }

 <div style='background: blue; width:100px; height:100px'></div> <img src="https://js.cx/drag-heroes/ball.png">

If you drag img , it can go beyond the screen, but does not cause scrolling of the screen. If you drag a div off the screen, it causes scrolling. Checked in Chrome and Fox - works the same.

What property of objects makes this difference?

I installed img display: block, set dimensions for it, but it still behaves the same way.

Answer 1 · 2016-07-25T06:52:43

The overflow property of the parent element ( body ) indicates what happens if the content goes outside this container.

It is important to note that the ' overflow ' property only affects block elements with a set height. In your case: div is a block with set height, img is a line element.

Source: http://www.w3schools.com/cssref/pr_pos_overflow.asp

By the way, if you set overflow: hidden for the body tag, then the scroll will not appear if the div goes beyond the screen.

You can also replace tar.style.left event.pageX with event.clientX , so you won’t get lost <body style="height:2000px;">
The author asked why the page does not scroll when you add a picture.
I installed img display: block, set dimensions for it, but it still behaves the same way.

Answer 2 · 2016-07-25T07:29:16

In the case when the picture is summarized, most likely, this is the standard behavior of browsers for elements for which the content can be dragged (dragging): images, links, selected text. These elements create an "avatar", which itself moves.

If you bring this "avatar" to the bottom of the page, then it will scroll. I suppose that browsers in such cases ignore the sources of "avatars", and work only for the "avatars" themselves. In the case of a div , a scroll happens, due to the fact that the browser assumes that there is a selection of content. Therefore, when the mouse button is clamped, he thinks that the selection has begun. And when you select the page will always scroll. This is based on my assumptions. I have not yet found that this behavior has been documented somewhere.

If you don’t need the scroll to work with the div'е , you can simply cancel the browser actions:

 document.onmousemove = function(event) { tar.style.left = event.pageX - 20 + 'px'; tar.style.top = event.pageY - 20 + 'px'; return false; }

Here is an example, you can see that for a non-empty link the actions are the same as for the picture.

 document.onmousedown = function(event) { var tar = event.target; if (tar.tagName != 'IMG' && tar.tagName != 'DIV' && tar.tagName != 'A') return; tar.style.position = 'absolute'; document.onmousemove = function(event) { tar.style.left = event.pageX - 20 + 'px'; tar.style.top = event.pageY - 20 + 'px'; //return false; } tar.onmouseup = function() { document.onmousemove = tar.onmouseup = null; } tar.ondragstart = function() { return false; } }

 body { height: 2000px }

 <div style='background: blue; width:100px; height:100px'></div> <img src="https://js.cx/drag-heroes/ball.png"> <a href="http://referencesource.microsoft.com/">Link</a> <a>Empty link</a>

Drag img and div

2 answers 2

More articles: