您的位置：首页 > 其它

自己做的实现图片等元素的拖拽

2011-04-28 16:03 190 查看

采用的是jquery1.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:script src="js/jquery.js" mce_src="js/jquery.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
$(function(){
//拖拽对象
var bar = $("#faDiv");
if (!bar.size() || !bar.size()) {
$(document).unbind("mouseover").unbind("mouseup");
return;
}
var drag = false;
var currentX = 0, currentY = 0, posX = bar.offset().left, posY = bar.offset().top;
bar.bind("mousedown",dragMouseDownHandler =function(e) {
drag = true;
currentX = e.pageX;
currentY = e.pageY;
//注：mousemove与mouseup下件均针对document注册，以解决鼠标离开_controlObj时事件丢失问题
//注册事件(鼠标移动)
$(document).bind("mousemove", dragMouseMoveHandler);
//注册事件(鼠标松开)
$(document).bind("mouseup", dragMouseUpHandler);
}).css("cursor", "move");

$(document).bind("mousemove",dragMouseMoveHandler=function(e) {
if (drag) {
var nowX = e.pageX, nowY = e.pageY;
var disX = nowX - currentX, disY = nowY - currentY;
bar.css("left", posX + disX).css("top", posY + disY);
//取消事件的默认动作
if(evt.preventDefault)
evt.preventDefault();
else
evt.returnValue = false;
}
});

$(document).bind("mouseup",dragMouseUpHandler=function() {
drag = false;
posX = bar.offset().left;
posY = bar.offset().top;
cleanMouseHandlers();

});

//注销鼠标事件(mousemove mouseup)
var cleanMouseHandlers = function(){
if(_dragObj){
$(_dragObj.document).unbind("mousemove");
$(_dragObj.document).unbind("mouseup");
}
};
})
// --></mce:script>
</head>

<body>

<div id="faDiv" style="position:absolute;" mce_style="position:absolute;">
<img id="wrapDiv" width="100px" height="100px" src="http://img.baidu.com/img/iknow/mobile/wapiknow.jpg" mce_src="http://img.baidu.com/img/iknow/mobile/wapiknow.jpg" />
</div>

<input type="button" value="test" onclick="test()"/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input id="xtxt" />
<input id="ytxt" />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航