如果元素的位置以百分比设置，如何使鼠标拖动的元素平滑？

Question

我在我的页面中做元素拖动的可能性。用户应拖动具有 % 或 px 设置位置的任何元素。 px个定位元素的拖动效果很好，但是%个定位元素的拖动速度太快，元素距离鼠标运行s。

我可以用什么方法解决这个问题？我想我可能需要做一些计算，所以元素不会移动，直到鼠标有运行一段距离，但我不明白我应该做什么样的计算。这可能应该取决于 1%.

中有多少 pixels

<html style="height: 100%;">
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title>test export</title>
    <script type='text/javascript'>
        var curr_moving_elem;
        var last_x, last_y;

        function getIndexOfFirstNonDigitSymbolInString(str) {
            if (!str)
                return -1;

            var index = -1;

            for (var i = 0; i < str.length; i++)
                if (str[i] != '-' && (str[i] < '0' || str[i] > '9')) {
                    index = i;
                    break;
                }

            return index;
        }

        function getIntegerFromAnyHTMLValue(str_val) {
            int_val = 0;
            var first_non_digit = getIndexOfFirstNonDigitSymbolInString(str_val);

            if (first_non_digit < 0)
                return NaN;

            var digits_only = str_val.substring(0, first_non_digit);

            return Number(digits_only);
        }

        function getStrSuffixFromAnyHTMLValue(str_val, suffix) {
            suffix = "";
            var first_non_digit = getIndexOfFirstNonDigitSymbolInString(str_val);

            if (first_non_digit < 0)
                return "";

            return str_val.substring(first_non_digit);
        }

        function handleMouseDown(e) {
            if (e.button == 0) {
                var main_elem_under_mouse = getMainElemUnderMouseClickOrDownOrMoveOrUp(e);

                if (main_elem_under_mouse && (main_elem_under_mouse.style.position.toLowerCase() == "absolute" || main_elem_under_mouse.style.position.toLowerCase() == "relative" || main_elem_under_mouse.style.position.toLowerCase() == "fixed")) {
                    curr_moving_elem = main_elem_under_mouse;
                    last_x = e.x;
                    last_y = e.y;
                }
            }
        }

        function handleMouseMove(e) {
            if (curr_moving_elem && e.button == 0) {
                var curr_top = curr_moving_elem.style.top;
                var curr_left = curr_moving_elem.style.left;

                var int_top = getIntegerFromAnyHTMLValue(curr_top);
                var top_suffix = getStrSuffixFromAnyHTMLValue(curr_top);

                var int_left = getIntegerFromAnyHTMLValue(curr_left);
                var left_suffix = getStrSuffixFromAnyHTMLValue(curr_left);

                var new_top = (int_top + (e.y - last_y)) + top_suffix;
                curr_moving_elem.style.top = new_top;

                var new_left = (int_left + (e.x - last_x)) + left_suffix;
                curr_moving_elem.style.left = new_left;

                last_x = e.x;
                last_y = e.y;
            }
        }

        function handleMouseUp(e) {
            //if (e.button == 0)
            //{
            curr_moving_elem = null;
            last_x = null;
            last_y = null;
            //}
        }

        function getMainElemUnderMouseClickOrDownOrMoveOrUp(e) {
            var elem;
            var evt = e || window.event;

            if (!evt)
                return null;

            if (evt.target)
                elem = evt.target;
            else if (evt.srcElement)
                elem = evt.srcElement;

            if (elem && elem.nodeType == 3) // defeat Safari bug
                elem = elem.parentNode;

            if (elem)
                if (elem.getAttribute('data-mainElem'))
                    return elem;
                else {
                    var parent = elem.parentElement;

                    while (parent && !parent.getAttribute('data-mainElem'))
                        parent = parent.parentElement;

                    if (parent && parent.getAttribute('data-mainElem'))
                        return parent;
                }
        }
    </script>
</head>
<body style="height: 100%; margin: 0px;" onmousedown="handleMouseDown(event);" onmousemove="handleMouseMove(event);"
    onmouseup="handleMouseUp(event);">
    <div data-mainelem='true' id='Div_107' style="position: ABSOLUTE; height: 20%; width: 35%;
        top: 10px; left: 5px; background-color: #800000; background-position: left top;
        background-repeat: repeat;">
    </div>
    <div data-mainelem='true' id='Div_108' style="position: ABSOLUTE; height: 40%; width: 25%;
        top: 10%; left: 5%; background-color: #00FF00; background-position: left top;
        background-repeat: repeat;">
    </div>
</body>
</html>

Answer 1

我认为您的问题出在这里：e.x - last_x。这将 return 以像素为单位的鼠标距离，但您需要以百分比表示。您需要做的是将此设置为屏幕百分比。类似于：

var percent_x = ((e.x - last.x)/window.innerWidth)*100

但是你必须区分百分比或像素。

如果元素的位置以百分比设置，如何使鼠标拖动的元素平滑？

How to make smooth elements dragging by mouse if their position set in percents?

html

javascript

mouse

move

elements