原生js 拖拽

Html

Css

  * {
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }

        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
        }

function drag(el) {
    var tag = document.getElementById(el);
    var clientW = document.body.clientWidth;
    var clientH = document.body.clientHeight;
    tag.onmousedown = function(e) {

var e = e || window.event;

var disX = tag.offsetLeft;
        var disY = tag.offsetTop;

var x = e.pageX - disX;
        var y = e.pageY - disY;

document.onmouseup = function() {
        document.onmousedown = null;
        document.onmousemove = null;
    };
}

drag("drag");

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

立即下载

原生js 拖拽



代码描述：原生js 拖拽，代码简单实用

传入 id,调用drag("id")方法即可,就可以直接拖拽。进行碰撞检测。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?执笔╀叙写惜度De流

相关代码

原生js 拖拽

最新