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;
}

Answer 2

当我mousedown时，图像从当前位置跳转而没有我动了它。我该如何解决这个问题？。

您可以将.top，.left属性值调整为1/2 img width，height

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

图像中心的

mousedown事件应将拖动中心定位在img元素的中心。

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

在纯Javascript

2 个答案: