<div style="width: 100px;height: 100px;background-color: brown;opacity: 0.8;position: absolute;top: 0;left: 0;"></div>
<script type="text/javascript">
function drag(obj){
// var div = document.getElementsByTagName('div')[0];
obj.onmousedown = function(event){
if(obj.setCapture){ //兼容IE浏览器,此方法在谷歌中会报错
obj.setCapture;
}
var divX = event.clientX - obj.offsetLeft;
var divY = event.clientY - obj.offsetTop;
document.onmousemove = function(event){
var event = event || window.event;
obj.style.left = event.clientX - divX + "px";
obj.style.top = event.clientY -divY + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
if(obj.releaseCapture){ //兼容IE浏览器,此方法在谷歌中会报错
obj.releaseCapture;
};
return false; //拖拽一个内容时,浏览器会默认搜索引擎去搜索,可以通过该方式取消默认行为;
}
}
}
var div = document.getElementsByTagName('div')[0];
drag(div);
</script>
鼠标拖拽函数—基于原生js
最新推荐文章于 2022-10-21 16:02:47 发布