javascript 实现元素拖动的源代码

//宿主为浏览器
//将相应的元素对象的引用传到函数中
function candrag(drager) {
    drager.onmousedown = function (down) {
        var offx = drager.offsetLeft
        var offy = drager.offsetTop;
        var offxl = down.clientX - offx;
        var offyl = down.clientY - offy;
        window.condition = 0;//为window添加了condition属性,用于解决和click之间的矛盾
        document.onmousemove = function (move) {
            drager.style.left = move.clientX - offxl + "px";
            drager.style.top = move.clientY - offyl + "px";
            drager.style.cursor = "move";
            condition = Math.abs(move.clientX - down.clientX) + Math.abs(move.clientY - down.clientY);
        }
    }
    drager.onmouseup = function () {
        document.onmousemove = null;
        draggerr.style.cursor = "auto";
    }
}
/*对于和click之间的矛盾解决,需要判断condition
*例如:
candrag(dragger);
d01.onclick = function () {
    if (!condition) {
        d01.style.backgroundColor = "red";
    }
}
*其中,d01为dragger的子元素
*/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值