在純Javascript中拖動一個覆蓋視頻的圖像

我試圖拖動包含div中的圖像，覆蓋視頻。當我mousedown，圖像從當前位置跳轉，沒有我移動它。我怎樣才能解決這個問題？。另外，是否可以限制圖像在父級內的移動？在純Javascript中拖動一個覆蓋視頻的圖像

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>

來源

2016-10-23 julekgwa

你必須要考慮的點擊點的座標和圖像的左上點之間的differrence當按下鼠標第一次：

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

來源

2016-10-23 06:22:17 mospans

當我mousedown，將圖像從當前位置跳躍而不我移動它。我怎樣才能解決這個問題？。

可以在圖像的中心調整.top，.left屬性值到1/2 imgwidth，height

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

mousedown事件應在img元件的中心位置的阻力中心。

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

來源

2016-10-23 06:33:26 guest271314

在純Javascript中拖動一個覆蓋視頻的圖像

回答

相關問題