div的鼠标拖移

Html

Css

请将鼠标移动到div上。

* {
	padding:0;
	margin:0
}
#open {
	width:300px;
	height:300px;
	background-color:brown;
	position:absolute;
	border-radius:50%;
}
#Chemistry,#Mathematics {
	width:250px;
	height:250px;
	background-color:blue;
	/*border-radius:50%;
	*/
	position:absolute;
	margin-left:300px;
}
#door {
	width:250px;
	height:250px;
	background-color:brown;
	position:absolute;
	margin-left:560px;
	margin-top:250px
}

//图像移动方法
function ImgMove(imgid, marginleft, margintop) {
    //获取元素
    var dv;
    function rdl_eventHandle(e) {
        event.cancelBubble = true;
        dv = document.elementFromPoint(event.clientX, event.clientY);
        if (dv.tagName.toLowerCase() != "div") oCode.innerHTML = "请将鼠标移动到项目div上。";
        else oCode.innerHTML = dv.id;
    }
    document.onmouseover = rdl_eventHandle;
    dv = document.getElementById(imgid);
    var x = 0;
    var y = 0;
    var l = 0;
    var t = 0;
    var isDown = false;
    //鼠标按下事件
    dv.onmousedown = function(e) {
        //获取x坐标和y坐标
        x = e.clientX; 
        y = e.clientY;
        //获取左部和顶部的偏移量
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //开关打开
        isDown = true;
        //设置样式  
        dv.style.cursor = 'move';
    }
    //鼠标移动
    var nx, ny, nl, nt;
    dv.onmousemove = function(e) {
        if (isDown == false) {
            return;
        }
        //获取x和y
        nx = e.clientX;
        ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        nl = nx - (x - l);
        nt = ny - (y - t);

dv.style.left = nl - marginleft + 'px';
        dv.style.top = nt - margintop + 'px';

}

}
ImgMove("Chemistry", 300, 0);
ImgMove("door", 560, 250);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

div的鼠标拖移



代码描述：div的鼠标拖移后回到原位的动画

更新时间：2019-10-10 00:11:01
这个是一个div的鼠标拖拽的移动方式，添加了可移动div在网页上的位置。并移动之后回到原点的动画效果。还有显示div名称的方法。希望对你们的项目有启发和帮助。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

。

相关代码

div的鼠标拖移

最新