CODEWITHSUNDEEP
javascripthtmlcss
Junius L
Junius L

Reputation: 16142

Drag an image overlaying video in pure Javascript

I'm trying to drag an image in a containing div, overlaying a video. When I mousedown, the image jumps from the current position without me moving it. How can I fix this?. Also, is it possible to restrict the movement of the image within the parent?

window.onload = addListeners();

function moveImage(e) {
    var move = document.getElementById('overlay');
    move.style.position = 'absolute';
    move.style.top = e.clientY + 'px';
    move.style.left = e.clientX + 'px';
}

function addListeners(){
    document.getElementById('overlay').addEventListener('mousedown', mouseDown, false);
     window.addEventListener('mouseup', mouseUp, false);

}

 function mouseUp()
{
    window.removeEventListener('mousemove', moveImage, true);
}


function mouseDown(e){
  window.addEventListener('mousemove', moveImage, true);
}
#overlay-box {
     position: relative;
}

#overlay {
    position: absolute;
    z-index: 30000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="overlay-box">
    <img style="width: 150px; height: 150px" id="overlay" src="https://s-media-cache-ak0.pinimg.com/originals/0a/cf/7e/0acf7efc731f9b6a544e85198e484286.png">
    <video id="video" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay style="position: relative; border:1px solid green" width="400" height="300">
        </video>
</div>

Upvotes: 1

Views: 180

Answers (2)

guest271314
guest271314

Reputation: 1

When I mousedown, the image jumps from the current position without me moving it. How can I fix this?.

You can adjust .top, .left property values to 1/2 img width, height

  move.style.top = e.clientY - 75 + "px";
  move.style.left = e.clientX - 75 + "px";

mousedown event at center of image should position center of drag at center of img element.

jsfiddle https://jsfiddle.net/zv5pwu20/4/

Upvotes: 0

mospans
mospans

Reputation: 124

You have to consider the differrence between coordinates of click point and left-top point of image when mouse down first time:

function int(number)
{
    number = parseInt(number);
    if (isNaN(number)) {
        number = 0;
    }
    return number;
}

var firstClickDeltaX,
firstClickDeltaY;

window.onload = addListeners();
function moveImage(e)
{
    e.preventDefault();
    var move = document.getElementById('overlay'),
    clickX = int(e.clientX),
    clickY = int(e.clientY),
    imageX = int(move.style.left),
    imageY = int(move.style.top),
    newImageX,
    newImageY;
    move.style.position = 'absolute';
    if (firstClickDeltaX == undefined) {
        firstClickDeltaX = clickX - imageX;
    }
    if (firstClickDeltaY == undefined) {
        firstClickDeltaY = clickY - imageY;
    }
    newImageX = clickX - firstClickDeltaX;
    newImageY = clickY - firstClickDeltaY;
    move.style.top = newImageY + 'px';
    move.style.left = newImageX + 'px';
}

function addListeners()
{
    document.getElementById('overlay').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);

}

function mouseUp()
{
    window.removeEventListener('mousemove', moveImage, true);
}


function mouseDown(e)
{
  window.addEventListener('mousemove', moveImage, true);
  firstClickDeltaX = undefined;
  firstClickDeltaY = undefined;
}

Correct example on JSFiddle

For restrict the movement of the image within the parent you need to add conditions for X- and Y-axis like this:

newImageX = clickX - firstClickDeltaX;
if (newImageX < 0) {
    newImageX = 0;
}
if (newImageX + imageWidth > parentWidth) {
    newImageX = parentWidth - imageWidth;
}

Upvotes: 1

Related Questions