拖拽的实现

最新推荐文章于 2025-08-19 08:41:01 发布

转载最新推荐文章于 2025-08-19 08:41:01 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xingxing88/p/6013954.html

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style type="text/css">
        .box1{
width:400px;
            height: 400px;
            background-color: firebrick;
        }
</style>
</head>
<body>

<div class="box1" id="box1">

</div>
<script type="text/javascript" src="">

var div=document.getElementById('box1');

function setPosition(x,y){
    div.style.msTransform='translate('+x+'px,'+y+'px)';
    div.style.WebkitTransform='translate('+x+'px,'+y+'px)';
    div.style.OTransform='translate('+x+'px,'+y+'px)';
    div.style.MozTransform='translate('+x+'px,'+y+'px)';
    div.style.transform='translate('+x+'px,'+y+'px)';
}

div.initPosition={
x:div.getBoundingClientRect().left,
    y:div.getBoundingClientRect().top
};

div.addEventListener('mousedown',function(event){

this.downPosition={
x:event.offsetX,
        y:event.offsetY
    };
    document.addEventListener('mousemove',handleMouseMove,false);
    document.addEventListener('mouseup',releaseMouse,false);
},false);

function handleMouseMove(event){
var x=event.clientX-div.downPosition.x-div.initPosition.x;
    var y=event.clientY-div.downPosition.y-div.initPosition.y;
    setPosition(x,y);
}

function releaseMouse(){
document.removeEventListener('mousemove',handleMouseMove,false);
    document.removeEventListener('mouseup',releaseMouse,false);
}