js 解决movebox移动问题取消图片默认拖动事件

最新推荐文章于 2022-06-24 06:30:03 发布

Rand Tsui

最新推荐文章于 2022-06-24 06:30:03 发布

阅读量2.9k

点赞数 1

分类专栏： web前端文章标签： javascript 取消图片默认拖动事件

本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意

本文链接：https://blog.csdn.net/for_cxc/article/details/51005026

版权

web前端专栏收录该内容

85 篇文章 1 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../Content/StyleSheet5.css" rel="stylesheet" />
    <script src="../Scripts/JavaScript5.js"></script>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <div id="center">
        <div id="black"></div>
        <div id="movebox">
            <img id="moveimg" src="../Images/b.jpg"/>
        </div>
        <img id="bigimg" src="../Images/b.jpg" />
    </div>
</body>
</html>

var movebox;
window.onload = function () {
    movebox = document.getElementById("movebox");
    movebox.addEventListener("mousedown", function (e) {
        if (e.button > 0) {
            fun2();
            return false;
        }
        e.preventDefault && e.preventDefault(); //明哥：去掉图片拖动响应  狠重要
        gen.x = e.clientX;
        gen.y = e.clientY;
        gen._x = movebox.offsetLeft;
        gen._y = movebox.offsetTop;
        gen.dx = gen.x - gen._x;
        gen.dy = gen.y - gen._y;
        document.addEventListener("mousemove",fun1,false);
        document.addEventListener("mouseup", fun2, false);
    }, false);
};
var fun1 = function (e) {
    gen.L = e.clientX - gen.dx;
    gen.T = e.clientY - gen.dy;
    var timefun = function () {
        window.getSelection().removeAllRanges();
        if (gen.L < 100)
            gen.L = 100;
        else if (gen.L > 200)
            gen.L = 200;
        if (gen.T < 125)
            gen.T = 125;
        else if (gen.T > 175)
            gen.T = 175;
        setLT(movebox, gen.L, gen.T);
    };
    setTimeout(timefun, 2);
};
var fun2 = function () {
    document.removeEventListener("mousemove", fun1, false);
    document.removeEventListener("mouseuo", fun2, false);
};
var gen = {
    x: null,
    y: null,
    _x: null,
    _y: null,
    dx: null,
    dy: null,
    L: null,
    T:null,
};
var setLT = function (dom, L, T) {
    dom.style.left = L + "px";
    dom.style.top = T + "px";
};

css

body {
    position:absolute;
    margin:0;
    padding:0;
}
#center{
    position:absolute;
    top:200px;
    left:300px;
    width:400px;
    height:400px;
    background-color:#808080;
}
#black{
    position:absolute;
    width:400px;
    height:400px;
    z-index:80;
    background-color:#000;
    opacity:0.6;
}
#bigimg{
    z-index:50;
    position:absolute;
    left:100px;
    top:125px;
}
#movebox{
    z-index:100;
    position:absolute;
    width:100px;
    height:100px;
    left:150px;
    top:150px;
    overflow:hidden;
    cursor:move;
    background-color:#ff6a00;
}
#moveimg{
    position:absolute;
    left:-50px;
    top:-25px;
}