技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
兼容IE, Firefox ,chrome 鼠标拖动图片和链接
兼容IE, Firefox ,chrome 鼠标拖动图片和链接
直接浏览, 点击预览
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>兼容IE, Firefox ,chrome 鼠标拖动图片和链接</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width:120px; height:120px; border:1px solid #ccc; cursor:move; position:absolute; left:13px; top:15px;">Drag me 图片<a href="#"><img src="http://6yang.net/images/linklogo.jpg" border="0"/></a></div>
<script>
$(function(){
//alert(document.getElementById('map').setCapture());
var _move = false, _x, _y;
var $obj = $('#map');
$obj
.mousedown(function(e){
var self = $(this);
self.css({opacity: 0.5});
_move = true;
_x = e.pageX - parseInt($obj.css("left"));
_y = e.pageY - parseInt($obj.css("top"));
if(self[0].setCapture){
self[0].setCapture();
}
else if(window.captureEvents){
window.captureEvents(e.MOUSEMOVE|e.MOUSEUP);
}
}).mousemove(function(e){
if(_move == true){
$(this).css({opacity: 1});
}
//alert(window.captureEvents(e.MOUSEMOVE|e.MOUSEUP));
}).mouseup(function(e){
_move = false;
var self = $(this);
if(self[0].releaseCapture)
self[0].releaseCapture();
else if(window.captureEvents)
window.captureEvents(e.MOUSEMOVE|e.MOUSEUP);
document.onmousemove=null;
document.onmouseup=null;
});
$(document).bind('mousemove', function(e){
if(_move){
var x = e.pageX-_x,
y = e.pageY-_y,
_currL = x,
_currT = y;
$obj.css({top: _currT, left: _currL});
}
}).bind('mouseup', function(){
_move=false;
$obj.css({opacity: 1});
});
});
</script>
</body>
</html>
share
直接浏览, 点击预览
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>兼容IE, Firefox ,chrome 鼠标拖动图片和链接</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width:120px; height:120px; border:1px solid #ccc; cursor:move; position:absolute; left:13px; top:15px;">Drag me 图片<a href="#"><img src="http://6yang.net/images/linklogo.jpg" border="0"/></a></div>
<script>
$(function(){
//alert(document.getElementById('map').setCapture());
var _move = false, _x, _y;
var $obj = $('#map');
$obj
.mousedown(function(e){
var self = $(this);
self.css({opacity: 0.5});
_move = true;
_x = e.pageX - parseInt($obj.css("left"));
_y = e.pageY - parseInt($obj.css("top"));
if(self[0].setCapture){
self[0].setCapture();
}
else if(window.captureEvents){
window.captureEvents(e.MOUSEMOVE|e.MOUSEUP);
}
}).mousemove(function(e){
if(_move == true){
$(this).css({opacity: 1});
}
//alert(window.captureEvents(e.MOUSEMOVE|e.MOUSEUP));
}).mouseup(function(e){
_move = false;
var self = $(this);
if(self[0].releaseCapture)
self[0].releaseCapture();
else if(window.captureEvents)
window.captureEvents(e.MOUSEMOVE|e.MOUSEUP);
document.onmousemove=null;
document.onmouseup=null;
});
$(document).bind('mousemove', function(e){
if(_move){
var x = e.pageX-_x,
y = e.pageY-_y,
_currL = x,
_currT = y;
$obj.css({top: _currT, left: _currL});
}
}).bind('mouseup', function(){
_move=false;
$obj.css({opacity: 1});
});
});
</script>
</body>
</html>