使用JS实现可移动的Div

使用JS实现可移动的Div

这是老师上课要求做的，使用JS实现div的移动，其实就是获取鼠标和div的位置，然后进行修改，代码如下。想要试用一下的效果的，可以看最下面，我把HTML代码直接放到md文档中，应该可以直接编译。

直接放到md中，整个页面就乱了，我还是新开一个页，想调试的可以戳这里www.rain1024.com-js75.html

下面是代码

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
&lt;script type="text/javascript"&gt;
    var oldLeft,oldMouseLeft;
    var oldRight,oldMouseRight;
    var isDown=false;
    function mousedown(e){
        oldLeft=document.getElementById('div1').style.left;
        oldMouseLeft= e.clientX;
        oldRight=document.getElementById('div1').style.top;
        oldMouseRight= e.clientY;
        isDown = true;
    }
    function mousemove(e){
        if(isDown){
            var newMouseLeft= e.clientX;
            var newLeft=parseInt(oldLeft)+parseInt(newMouseLeft)-parseInt(oldMouseLeft)+"px";
            var newMouseRight= e.clientY;
            var newRight=parseInt(oldRight)+parseInt(newMouseRight)-parseInt(oldMouseRight)+"px";
            document.getElementById('div1').style.left=newLeft;
            document.getElementById('div1').style.top=newRight;
        }
    }
    function mouseup(){
        isDown=false;
    }
&lt;/script&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div id="div1" style="background-color: blue;position: absolute;left: 100px;top: 100px;width: 100px;height: 100px"
     onmousedown="mousedown(event)" onmousemove="mousemove(event)"
        onmouseup="mouseup()"&gt;
&lt;/div&gt;
&lt;!--onmousedown="getXY(event);"--&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

var oldLeft,oldMouseLeft;

var oldRight,oldMouseRight;

var isDown=false;

function mousedown(e){

oldLeft=document.getElementById('div1').style.left;

oldMouseLeft= e.clientX;

oldRight=document.getElementById('div1').style.top;

oldMouseRight= e.clientY;

isDown = true;

}

function mousemove(e){

if(isDown){

var newMouseLeft= e.clientX;

var newLeft=parseInt(oldLeft)+parseInt(newMouseLeft)-parseInt(oldMouseLeft)+"px";

var newMouseRight= e.clientY;

var newRight=parseInt(oldRight)+parseInt(newMouseRight)-parseInt(oldMouseRight)+"px";

document.getElementById('div1').style.left=newLeft;

document.getElementById('div1').style.top=newRight;

}

function mouseup(){

isDown=false;

}

</script></head>

<body>

<div id="div1" style="background-color: blue;position: absolute;left: 100px;top: 100px;width: 100px;height: 100px"

onmousedown="mousedown(event)" onmousemove="mousemove(event)"

onmouseup="mouseup()">

</div>

</body>

</html>

这是老师上课要求做的，使用JS实现div的移动，其实就是获取鼠标和div的位置，然后进行修改，代码如下。想要试用一下的效果的，可以看最下面，我把HTML代码直接放到md文档中，应该可以直接编译。

直接放到md中，整个页面就乱了，我还是新开一个页，想调试的可以戳这里www.rain1024.com-js75.html

下面是代码

发表回复 取消回复

发表回复取消回复