HTML一段可以把文字随意拖动的代码
要用到的一个功能，最终实现方法是如下：
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>拖拽文字选中</title>
<script type="text/javascript" src="/image/move_img.js"></script>
<style>
#div1 {
width: 100px;
height: 100px;
/*background: red;*/
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var disX = 0;
var disY = 0;
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
if (oDiv.setCapture) {
//IE
oDiv.onmousemove = mouseMove;
oDiv.onmouseup = mouseUp;
oDiv.setCapture();//IE
} else {
//chrome,ff
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}
function mouseMove(ev) {
var oEvent = ev || event;
var left = oEvent.clientX - disX;
var top = oEvent.clientY - disY;
oDiv.style.left = left + 'px';
oDiv.style.top = top + 'px';
}
function mouseUp() {
this.onmousemove = null;
this.onmouseup = null;
if (oDiv.releaseCapture) {
oDiv.releaseCapture();//IE
}
}
return false;//chrome,ff,IE9
};
}
</script>
</head>
<body>
<div id="div1"><div style="width:960px"><p>我是一个DIV</p><p>电脑屋</p><p>我是可以被拖动的文字,当然我也可以是一个图片或者别的代码!</p></div></div>
</body>
</html>
评论0