鼠标拖动定位问题，求解决，谢谢

nitaiyoucala 2018-05-15 05:29:05

问题：我去掉id为“divTest"的那个div 下面鼠标拖动时间选择能正常使用。加这个div下面鼠标拖动选择定位就不正常了（目测是有了滚动条有就不行了）。求解决？
全部代码，复制过去直接可以运行




<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>

        var initSelectBox = function (selector, selectCallback) {

            function clearBubble(e) {

                if (e.stopPropagation) {

                    e.stopPropagation();

                } else {

                    e.cancelBubble = true;

                }

                if (e.preventDefault) {

                    e.preventDefault();

                } else {

                    e.returnValue = false;

                }

            }

            var $div_container = $(selector);

            //框选事件

            $div_container

                .on('mousedown', function (eventDown) {

                    var isSelect = true;

                    var $selectBoxDashed = $('<div class="select-box-dashed"></div>');

                    $('body').append($selectBoxDashed);

                    var startX = eventDown.x || eventDown.clientX;

                    var startY = eventDown.y || eventDown.clientY;



                    $selectBoxDashed.css({

                        left: startX,

                        top: startY

                    });



                    var _x = null;

                    var _y = null;

                    clearBubble(eventDown);

                    $(selector).on('mousemove', function (eventMove) {

                        $selectBoxDashed.css('display', 'block');

                        _x = eventMove.x || eventMove.clientX;

                        _y = eventMove.y || eventMove.clientY;

                        var _left = Math.min(_x, startX);

                        var _top = Math.min(_y, startY);

                        var _width = Math.abs(_x - startX);

                        var _height = Math.abs(_y - startY);

                        $selectBoxDashed.css({

                            left: _left,

                            top: _top,

                            width: _width,

                            height: _height

                        });

                        $(selector).find('.select-item').each(function () {

                            var $item = $(this);

                            var itemX_pos = $item.prop('offsetWidth') + $item.prop('offsetLeft');

                            var itemY_pos = $item.prop('offsetHeight') + $item.prop('offsetTop');

                            //  判断 select-item 是否与选框有交集，添加选中的效果（ temp-selected ，在事件 mouseup 之后将 temp-selected 替换为 selected）

                            var condition1 = itemX_pos > _left;

                            var condition2 = itemY_pos > _top;

                            var condition3 = $item.prop('offsetLeft') < (_left + _width);

                            var condition4 = $item.prop('offsetTop') < (_top + _height);

                            if (condition1 && condition2 && condition3 && condition4) {

                                $item.addClass('temp-selected');

                            } else {

                                $item.removeClass('temp-selected');

                            }

                        });

                        clearBubble(eventMove);

                    });



                    $(document).on('mouseup', function () {

                        $(selector).off('mousemove');

                        $(selector)

                            .find('.select-item.temp-selected')

                            .removeClass('temp-selected')

                            .addClass('selected');

                        $selectBoxDashed.remove();



                        if (selectCallback) {

                            selectCallback();

                        }

                    });

                })

                //点选切换选中事件

                .on('click', '.select-item', function () {

                    if ($(this).hasClass('selected')) {

                        $(this).removeClass('selected');

                    } else {

                        $(this).addClass('selected');

                    }

                })

                //点选全选全不选

                .on('click', '.toggle-all-btn', function () {

                    if ($(this).attr('data-all')) {

                        $(this).removeAttr('data-all');

                        $div_container.find('.select-item').removeClass('selected');

                    } else {

                        $(this).attr('data-all', 1);

                        $div_container.find('.select-item').addClass('selected');

                    }

                });

        };

    </script>

    <script type="text/javascript">

        $(function () {

            initSelectBox('.div_container');

        })

    </script>

    <style type="text/css">

        .div_container {

            padding: 0px;

            margin: 0px 0px 0px;

            border: 0px solid #ddd;

            text-align: center;

            width: 832px;

            overflow: hidden;

            border-right: 1px solid #ddd;

            border-bottom: 1px solid #ddd;

        }



        .select-item {

            display: inline-block;

            float: left;

            width: 33px;

            height: 22px;

            text-align: center;

            line-height: 22px;

            font-size: 12px;

            border-left: 1px solid #DDDDDD;

            border-top: 1px solid #DDDDDD;

            cursor: pointer;

            background: #49B9E3;

            color: #797979;

        }



            .select-item.selected,

            .select-item.temp-selected {

                background-color: #fff;

            }



        .select-item-head {

            float: left;

            width: 33px;

            height: 22px;

            text-align: center;

            line-height: 22px;

            font-size: 12px;

            border-left: 1px solid #DDDDDD;

            border-top: 1px solid #DDDDDD;

            cursor: pointer;

            color: #797979;

        }



        .head_left {

            width: 49px;

        }



        .select-box-dashed {

            position: absolute;

            display: none;

            width: 0px;

            height: 0px;

            padding: 0px;

            margin: 0px;

            border: 1px dashed #0099ff;

            background-color: #c3d5ed;

            opacity: 0.5;

            filter: alpha(opacity=50);

            font-size: 0px;

            z-index: 99999;

        }

    </style>

</head>

<body>

    <div id="divTest" style="height: 800px; background:#ddd;font-size:30px; text-align: center; line-height: 800px; ">加了这个div下面鼠标拖动选择时间就不能用了，我看是定位问题，求解决</div>

    <p /> 鼠标拖动选择时间：<br />

    <div class="div_container">

        <div class="select-item-head head_left">时间</div>

        <div class="select-item-head">1</div>

        <div class="select-item-head">2</div>

        <div class="select-item-head">3</div>

        <div class="select-item-head">4</div>

        <div class="select-item-head">5</div>

        <div class="select-item-head">6</div>

        <div class="select-item-head">7</div>

        <div class="select-item-head">8</div>

        <div class="select-item-head">9</div>

        <div class="select-item-head">10</div>

        <div class="select-item-head">11</div>

        <div class="select-item-head">12</div>

        <div class="select-item-head">13</div>

        <div class="select-item-head">14</div>

        <div class="select-item-head">15</div>

        <div class="select-item-head">16</div>

        <div class="select-item-head">17</div>

        <div class="select-item-head">18</div>

        <div class="select-item-head">19</div>

        <div class="select-item-head">20</div>

        <div class="select-item-head">21</div>

        <div class="select-item-head">22</div>

        <div class="select-item-head">23</div>

        <div class="select-item-head head_left">星期一</div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item-head head_left">星期二</div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

        <div class="select-item"></div>

      

    </div>

</body>

</html>
...全文
868 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
囧 2018-05-16
  • 打赏
  • 举报
 回复
都改成pageX, pageY 

var startX = eventDown.pageX;
var startY = eventDown.pageY;

_x = eventMove.pageX;
 _y = eventMove.pageY;
nitaiyoucala 2018-05-16
  • 打赏
  • 举报
 回复
求大牛修改，谢谢
30-days-of-[removed]该存储库包含30天JS的前端实践
了JavaScript 30天挑战赛的入门文件和完整的解决方案。 通过获取课程 30天JavaScript 这是所有日子和项目的列表： 自定义视频播放器 按键序列检测 在Scroll中滑入 JavaScript参考VS复制 本地存储 鼠标移动阴影 无...
易语言程序免安装版下载
6) 修改MYSQL支持库跨静态编译的EXE和DLL传递连接句柄和记录集句柄无效的BUG（改动较大，可能会产生兼容性问题，我们已经仔细测试，也请使用到此库的用户帮助我们多多测试，以便及早发现问题，谢谢） 7) 其它修改 ...
cms-cloud后台管理系统
npm install # 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。 npm install --registry=https://registry.npm.taobao.org   本地开发 启动...
JavaScript 实现鼠标拖动元素
最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点，用于固定定位，然后在复制HTML，粘贴在页面的开发代码中，就是这么一个功能，实现了很多遍，都没有做好，不得已采用了jQuery.fn.draggable插件，在...
android 键盘 光标位置不对,鼠标定位不准的解决方法大全
问题提出：脚本之家－电脑门诊－小网－NO.2388 说：站长您好: 请问您一个问题。网吧里是双飞燕的鼠标。但不能精确定位。鼠标的注册表也试过是要好一点。但还是不行...请问怎么解决啊?先我们说下光电鼠标的定位原理...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章