实现div在固定区域跟随鼠标移动点击拖动而产生的变化

一、思路

1.在外层增加一个 DIV 容器,并设置好容器的大小。(即:宽和高)

当容器存在边框的时候,由于这里还没找到获取的方法,所以,在容器边框大于 0 的时候,获得的容器的限制区域的坐标会有误差。

为了避免这情况,可以在多加一次容器,有边框样式的在外层,无边框样子的在内层。

例:

<style>
    #mainContainer {
        border: 10px solid #990000;
        width: 600px;
        height: 300px;
    }

    #innerContainer {
        width: 100%;
        height: 100%;
    }

    #Drag {
        /*border: 5px solid #C4E3FD;*/
        background: #C4E3FD;
        width: 50px;
        height: 50px;
        top: 50px;
        left: 50px;
        z-index: 2;
    }

    #Drag2 {
        /*border: 5px solid #C4E3FD;*/
        background: #ff0000;
        width: 50px;
        height: 50px;
        top: 50px;
        left: 50px;
        z-index: 3;
    }
</style>

<div id="mainContainer">
    <div id="innerContainer">
        <div id="Drag" onmousedown="moveBind(this, event)">1</div>
        <div id="Drag2" onmousedown="moveBind(this, event)">2</div>
    </div>
</div>
<br />拖放状态:<span id="idShow">未开始</span>

2.为了方便获得元素的位置和大小,先写一个方法来辅助(谷歌不能用了可恶orz,只能百度出这个方法并稍微做点修改)。

    //获得元素的坐标与大小。
    function findPosition(oElement) {
        var x2 = 0;
        var y2 = 0;
        var width = oElement.clientWidth;
        var height = oElement.clientHeight;
        //alert(width + "=" + height);
        if (typeof (oElement.offsetParent) != ‘undefined‘) {
            for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
                posX += oElement.offsetLeft;
                posY += oElement.offsetTop;
            }
            x2 = posX + width;
            y2 = posY + height;
            return [posX, posY, x2, y2, width, height];

        } else {
            x2 = oElement.x + width;
            y2 = oElement.y + height;
            return [oElement.x, oElement.y, x2, y2, width, height];
        }
    }

这里以数组的形式返回元素的 X 开始坐标和 Y 开始坐标,X 结束坐标和 Y 结束坐标,元素真实的宽与高(不算边框)

3.在鼠标按下事件里,先获得容器的位置数据:

//获得容器坐标。
var container = findPosition(document.getElementById("innerContainer"));
var containerLeft = container[0];
var containerTop = container[1];
var containerWidth = container[4];
var containerHeight = container[5];

4.计算拖动 DIV 元素可移动的区域坐标:

/*计算出容器的范围坐标。*/

//开始 X 坐标。
var startX = containerLeft;
//开始 Y 坐标。
var startY = containerTop;
//结束 X 坐标。
var maxX = startX + containerWidth - width;
//结束 Y 坐标。
var maxY = startY + containerHeight - height;

开始 X 坐标 = 容器的左上角 X 坐标。

开始 Y 坐标 = 容器的左上角 Y 坐标。

结束 X 坐标 = 开始 X 坐标 + 容器的宽度 - 拖动 DIV 元素的宽度

结束 Y 坐标 = 开始 Y 坐标 + 容器的高度 - 拖动 DIV 元素的高度

5.当区域内存在多个可拖动的 DIV 元素时,要把当前鼠标点击的那个 DIV 设置成置顶显示。

    //获得最大 Z 坐标。
    function getMaxIndex() {
        var index = 0;
        var ds = document.getElementById(‘innerContainer‘).getElementsByTagName(‘div‘);
        var length = document.getElementById(‘innerContainer‘).getElementsByTagName(‘div‘).length;

        for (var loop = 0; loop < length; loop++) {
            if (ds[loop].style.zIndex > index) index = ds[loop].style.zIndex;
        }

        return parseInt(index);
    }

该方法遍历容器内的所有 DIV 元素(即:可拖动元素),取得它们当中z-Index最大的值。

然后,设置点击元素的 z-Index 值:

//鼠标选中的元素设置成顶层。
obj.style.zIndex = getMaxIndex() + 1;

/*******************以上方法是在鼠标按下事件里 onmousedown  ******************/

/*******************以下方法是在鼠标按下事件里 onmousemove ******************/

6.在移动事件里,修改元素位置的外层加上如下这条件。

            //不可以超出指定的范围。
            if (moveLeft >= startX && moveTop >= startY && moveLeft <= maxX && moveTop <= maxY) {
                //当移动位置在范围内时,元素跟随鼠标移动。
                obj.style.left = moveLeft + "px";
                obj.style.top = moveTop + "px";
            }

这条件表示:移动的位置在容器范围内时,元素才可以跟随鼠标移动。

但是,现在这样的做法,当鼠标快速拖出容器区域时,元素就会停止不动,但并没有移动到最边界,同时,鼠标在区域外并没有放开按键,移动鼠标时元素并不会跟着移动。

解决的思路是:

(1)当元素水平(X坐标)移动的位置没有达到或超出容器限制区域的 X 坐标区域时。

继续修改拖动元素的 X 坐标位置。

(2)当元素水平(X坐标)移动的位置超出容器限制区域的最大 X 坐标(即:容器右下角的 X 坐标)区域时(即:限制区域的右边),将元素的 X 坐标设置成最大 X 坐标值。

if (moveLeft >= startX && moveLeft <= maxX) {
                    obj.style.left = moveLeft + "px";
                } else if (moveLeft > maxX) {
                    obj.style.left = maxX + "px";
                }

(3)当元素水平(X坐标)移动的位置小于容器限制区域的开始 X 坐标(即:容器左上角的 X 坐标)区域时(即:限制区域的左边),将元素的 X 坐标设置成最小 X 坐标值。

                if (moveLeft >= startX && moveLeft <= maxX) {
                    obj.style.left = moveLeft + "px";
                } else if (moveLeft > maxX) {
                    obj.style.left = maxX + "px";
                } else if (moveLeft < startX) {
                    obj.style.left = startX + "px";
                }

(4)Y 坐标同以上(1)(2)(3):

                if (moveTop >= startY && moveTop <= maxY) {
                    obj.style.top = moveTop + "px";
                } else if (moveTop > maxY) {
                    obj.style.top = maxY + "px";
                } else if (moveTop < startY) {
                    obj.style.top = startY + "px";
                }

完成了!这时,鼠标拖动到区域外面时,元素同样会跟随鼠标的位置在容器内移动。

二、以下是完整源码:

JS部分:

    //获得元素的坐标与大小。
    function findPosition(oElement) {
        var x2 = 0;
        var y2 = 0;
        var width = oElement.clientWidth;
        var height = oElement.clientHeight;
        //alert(width + "=" + height);
        if (typeof (oElement.offsetParent) != ‘undefined‘) {
            for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
                posX += oElement.offsetLeft;
                posY += oElement.offsetTop;
            }
            x2 = posX + width;
            y2 = posY + height;
            return [posX, posY, x2, y2, width, height];

        } else {
            x2 = oElement.x + width;
            y2 = oElement.y + height;
            return [oElement.x, oElement.y, x2, y2, width, height];
        }
    }

    function moveBind(obj, evnt) {
        //获得元素坐标。
        var left = obj.offsetLeft;
        var top = obj.offsetTop;
        var width = obj.offsetWidth;
        var height = obj.offsetHeight;

        //计算出鼠标的位置与元素位置的差值。
        var cleft = evnt.clientX - left;
        var ctop = evnt.clientY - top;

        //获得容器坐标。
        var container = findPosition(document.getElementById("innerContainer"));
        var containerLeft = container[0];
        var containerTop = container[1];
        var containerWidth = container[4];
        var containerHeight = container[5];

        /*计算出容器的范围坐标。*/

        //开始 X 坐标。
        var startX = containerLeft;
        //开始 Y 坐标。
        var startY = containerTop;
        //结束 X 坐标。
        var maxX = startX + containerWidth - width;
        //结束 Y 坐标。
        var maxY = startY + containerHeight - height;

        //鼠标选中的元素设置成顶层。
        obj.style.zIndex = getMaxIndex() + 1;

        //输出显示。
        //show("idShow", startX, startY);

        document.onmousemove = function (doc) {
            //计算出移动后的坐标。
            var moveLeft = doc.clientX - cleft;
            var moveTop = doc.clientY - ctop;

            //设置成绝对定位,让元素可以移动。
            obj.style.position = "absolute";

            //不可以超出指定的范围。
            if (moveLeft >= startX && moveTop >= startY && moveLeft <= maxX && moveTop <= maxY) {
                //当移动位置在范围内时,元素跟随鼠标移动。
                obj.style.left = moveLeft + "px";
                obj.style.top = moveTop + "px";
            } else {
                /****************以下为处理当鼠标的位置不在范围内里,鼠标的移动,里面的元素也要跟着移动*****************/
                //向右移动时,如果移动坐标没有大于最大 X 坐标,则移动,否则设置成最大 X 坐标的值。
                if (moveLeft >= startX && moveLeft <= maxX) {
                    obj.style.left = moveLeft + "px";
                } else if (moveLeft > maxX) {
                    obj.style.left = maxX + "px";
                } else if (moveLeft < startX) {
                    obj.style.left = startX + "px";
                }

                //向下移动时,如果移动坐标没有大于最大 Y 坐标,则移动,否则设置成最大 Y 坐标的值。
                if (moveTop >= startY && moveTop <= maxY) {
                    obj.style.top = moveTop + "px";
                } else if (moveTop > maxY) {
                    obj.style.top = maxY + "px";
                } else if (moveTop < startY) {
                    obj.style.top = startY + "px";
                }
            }

            show("idShow", moveLeft, moveTop);
        }

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

    //获得最大 Z 坐标。
    function getMaxIndex() {
        var index = 0;
        var ds = document.getElementById(‘innerContainer‘).getElementsByTagName(‘div‘);
        var length = document.getElementById(‘innerContainer‘).getElementsByTagName(‘div‘).length;

        for (var loop = 0; loop < length; loop++) {
            if (ds[loop].style.zIndex > index) index = ds[loop].style.zIndex;
        }

        return parseInt(index);
    }

    //显示坐标信息。
    function show(id, x, y) {
        document.getElementById(id).innerHTML = "left:" + x + ";top:" + y;
    }

HTML部分:

<style>
    #mainContainer {
        border: 10px solid #990000;
        width: 600px;
        height: 300px;
    }

    #innerContainer {
        width: 100%;
        height: 100%;
    }

    #Drag {
        /*border: 5px solid #C4E3FD;*/
        background: #C4E3FD;
        width: 50px;
        height: 50px;
        top: 50px;
        left: 50px;
        z-index: 2;
    }

    #Drag2 {
        /*border: 5px solid #C4E3FD;*/
        background: #ff0000;
        width: 50px;
        height: 50px;
        top: 50px;
        left: 50px;
        z-index: 3;
    }
</style>

<div id="mainContainer">
    <div id="innerContainer">
        <div id="Drag" onmousedown="moveBind(this, event)">1</div>
        <div id="Drag2" onmousedown="moveBind(this, event)">2</div>
    </div>
</div>
<br />拖放状态:<span id="idShow">未开始</span>

原文地址:https://www.cnblogs.com/Helios1/p/10261143.html

时间: 2024-10-10 02:55:08

实现div在固定区域跟随鼠标移动点击拖动而产生的变化的相关文章

一款基于TweenMax跟随鼠标单击移动的div

今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: <html ng-app="app" ng-click="moveblock($event)"> <body> <block class="block">Where Do You Want Me?<br />C

div跟随鼠标悬浮显示

<span style="font-size:18px;"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author"

div跟随鼠标移动

1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠标的坐标,进行给div坐标赋值,实现如下: var left = event.clientX; var top = event.clientY; box1.style.left = left + "px"; box1.style.top = top +"px"; 第二种

阻止右键菜单(阻止默认事件)&amp;&amp;跟随鼠标移动(大图展示)&amp;&amp;自定义右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

javascript元素跟随鼠标在指定区域运动

元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标区域</title> <style type="text/css"> *{margin:0;padding:0;} .area{ width:

【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑出.这是一个十分有趣的效果. 我们使用无序列表来组织缩略图和描述遮罩层: <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http://dribbble.com/shots/

html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs

一.获取鼠标坐标 clientX:鼠标到可视区边缘的距离:    scrollLeft:滚动条到页面顶端的距离(不可视区的距离) 兼容性写法: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 跟随鼠标移动的divs,