var obig = document.getElementById("imgArr");
var osmall = document.getElementById("UserImg");
document.onmousemove = small_move;
document.onmouseup = small_up;
osmall.startX = e.clientX - osmall.offsetLeft;
osmall.startY = e.clientY - osmall.offsetTop;
}
function small_move(e) {
var obig = document.getElementById("imgArr");
var osmall = document.getElementById("UserImg");
var e = e || window.event;
osmall.style.left = e.clientX - osmall.startX + "px";
osmall.style.top = e.clientY - osmall.startY + "px";
var contDivW = $(".imgArr").width();
var contDivH = $(".imgArr").height();
if (e.clientX - osmall.startX <= 0) { osmall.style.left = 0 + "px"; }
if (e.clientY - osmall.startY <= 0) { osmall.style.top = 0 + "px"; }
if (e.clientX - osmall.startX >= contDivW) { osmall.style.left = contDivW - osmall.startX + "px"; }
if (e.clientY - osmall.startY >= contDivH) { osmall.style.top = contDivH - osmall.startY + "px"; }
}
function small_up() {
document.onmousemove = null;
}
html代码:
<div class="imgArr" style="width:620px;height:420px;background-color:red;position:relative;">
<img class="ImgA" src="Images/01.jpg" id="UserImg" width="150" height="150" />
<img src="Images/02.png" id="BackImg" />
</div>
但是上面的方法在拖动的过程中体验不是很好,推荐jq改写的,原理是在原来的图片上加入一个div,拖动div的位置进而拖动图片
$(function () {
drop("#aaaa", "#aaaa"); //设定绑定拖动事件
});
//让一个DIV可以被拖动,id传入移动快标识,title为可拖动位置
var posX = 0, posY = 0;
function drop(id, title) {
var fdiv = $(id);
$(title).bind("mousedown", function (e) {
posX = e.clientX - parseInt(fdiv.css("left"));
posY = e.clientY - parseInt(fdiv.css("top"));
document.onmousemove = function (ev) {
fdiv.css("left", (ev.clientX - posX) + "px");
fdiv.css("top", (ev.clientY - posY) + "px");
};
});
document.onmouseup = function (ev) {
document.onmousemove = null;
};
document.ondragstart = function () { window.event.returnValue = false;};
}
html代码:
<div id="aaaa" style=" position:absolute; top:0; left:0; width:150px; height:150px;"><img class="ImgA" src="Images/01.jpg" id="UserImg"
width="150" height="150" /></div>
<img src="Images/02.png" id="BackImg" />