如何在div中制作可拖動圖片？
[英]How to make a draggable image in div?
問題描述
我正在嘗試在像Facebook封面這樣的div中移動圖像，但是使用圖像標簽時它無法平穩移動 。 當我將此圖像放在像背景圖像這樣的div中時，它在工作，我的js代碼是..
var draggable = function(element) {
element.addEventListener('mousedown', function(e) {
e.stopPropagation();
if (e.target != element)
return;
var offsetX = e.pageX - element.offsetLeft;
var offsetY = e.pageY - element.offsetTop;
function move(e) {
var ele = document.getElementById('ele');
var width = 400-ele.clientWidth;
var height = 400-ele.clientHeight;
element.style.left = (e.pageX - offsetX) + 'px';
element.style.top = (e.pageY - offsetY) + 'px';
}
function stop(e) {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', stop);
}
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', stop);
});
}
function init() {
var ele = document.getElementById('ele');
draggable(ele);
}
和我的HTML代碼是行不通的..
<body onload="init();">
<div id="testdiv" style="position:relative;left:100px;overflow:hidden;border:1px solid #ccc;width:400px;height:400px">
<img src="Desert.jpg" id="ele" style="position:absolute;"></img>
</div>
</body>
並且此代碼正在工作..
<body onload="init();">
<div id="testdiv" style="position:relative;left:100px;overflow:hidden;border:1px solid #ccc;width:400px;height:400px">
<div id="ele" style="width:100%; height:100%; background-color: gray; position:absolute; background-image:url( 'Desert.jpg' );"></div>
</div>
</body>
2 個解決方案
解決方案1
0 2014-07-25 08:36:43
您可以參考這個問題，該問題處理拖動圖像的想法相同，盡管問題略有不同。 從問題中查看他/她的JSFiddle。
解決方案2
-1 2014-07-25 08:26:35
<img>是一個自動關閉的標簽。 您不需要</img>因為它無效。 刪除它，它應該可以正常工作。 根據您的doctype您應該使用：
HTML5
<img src="Desert.jpg" id="ele" style="position:absolute;">
XHTML （注意標記末尾的/ ）
<img src="Desert.jpg" id="ele" style="position:absolute;" />
如何使div可拖動和可拖放
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.