javascript - 在纯 Javascript 中拖动图像覆盖视频

Question

我正在尝试在包含的 div 中拖动图像，以覆盖视频。当我 mousedown 时，图像从当前位置跳转而无需我移动它。我怎样才能解决这个问题？。另外，是否可以限制图像在父级内的移动？

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>

Answer 1

第一次按下鼠标时要考虑点击点坐标和图片左上角坐标的区别:

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

为了限制图像在父级中的移动，您需要像这样为 X 轴和 Y 轴添加条件:

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