javascript - 如何检测可拖动的 HTML 元素是否位于边框的角落？

问题描述

我正在制作一个应用程序，我需要一些 HTML 元素，你可以在盒子周围拖动。有没有办法检测HTML元素是否被拖到框的右下角？这样我就可以删除框中的一个东西。我可能有一些不必要的代码。这是我的 HTML。
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
    <link href="/static/styles.css" rel="stylesheet">
</head>

<body>

    <div id="container">
        <div id="comboCon1">
            <h3>poooop</h3>
        </div>
        <div id="comboCon2"></div>
    </div>
    <div class="right">
        <button class="new_"
    </div>

    <script>
        // Draggable Div 1
        document.getElementById("comboCon1").style.position = "relative"; // -> Add position relative
        document.getElementById("comboCon1").style.width = "151px";
        document.getElementById("comboCon1").setAttribute("class", "draggable");

        document.getElementById("comboCon1").style.border = "1px solid black";
        document.getElementById("comboCon1").style.padding = "10px";


        // Draggable Div 2
        document.getElementById("comboCon2").style.position = "relative";
        document.getElementById("comboCon2").style.width = "151px";
        document.getElementById("comboCon2").setAttribute("class", "draggable");

        document.getElementById("comboCon2").style.border = "1px solid black";
        document.getElementById("comboCon2").style.padding = "10px";


        // Container
        document.getElementById("container").style.border = "1px solid black";
        document.getElementById("container").style.width = "60%";
        document.getElementById("container").style.height = "1000px";

        //////////////////////
        // Begin Drag events
        //////////////////////

        var startX = 0; //-> Mouse position.
        var startY = 0;

        var offsetX = 0; // -> Element position
        var offsetY = 0;

        var minBoundX = 0; // -> Top Drag Position ( Minimum )
        var minBoundY = 0;

        var maxBoundX = 0; // -> Bottom Drag Position ( Maximum )
        var maxBoundY = 0;

        var dragElement; // -> Pass the target to OnMouseMove Event

        var oldZIndex = 0; // -> Increase Z-Index while drag

        // 1)
        initDragDrop(); // -> initialize 2 Events.

        function initDragDrop() {
            document.onmousedown = OnMouseClickDown;
            document.onmouseup = OnMouseClickUp;
        }

        // 2) Click on Element
        function OnMouseClickDown(event) {

            var target; // -> Element that triggered the event

            if (event.target != null) { // -> If Browser is IE than use 'srcElement'

                target = event.target;
            }
            else {
                target = event.srcElement;
            }

            //  Check which button was clicked and if element has class 'draggable'
            if ((event.button == 1 || event.button == 0) && target.className == "draggable") {

                // Current Mouse position
                startX = event.clientX;
                startY = event.clientY;

                // Current Element position
                offsetX = ExtractNumber(target.style.left); // -> Convert to INT
                offsetY = ExtractNumber(target.style.top);

                // Border ( Div Container ) 

                minBoundX = target.parentNode.offsetLeft; // Minimal -> Top Position.
                minBoundY = target.parentNode.offsetTop;

                maxBoundX = minBoundX + target.parentNode.offsetWidth - target.offsetWidth; // Maximal.
                maxBoundY = minBoundY + target.parentNode.offsetHeight - target.offsetHeight;



                oldZIndex = target.style.zIndex;
                target.style.zIndex = 10; // -> Move element infront of others

                dragElement = target; // -> Pass to onMouseMove

                document.onmousemove = OnMouseMove; // -> Begin drag.

                document.body.focus() // -> Cancel selections

                document.onselectstart = function() { return false }; // -> Cancel selection in IE.
            }
        }

        // 3) Convert current Element position in INT
        function ExtractNumber(value) {

            var number = parseInt(value);

            if (number == null || isNaN(number)) {
                return 0;
            }
            else {
                return number;
            }
        }

        // 4) Drag
        function OnMouseMove(event) {

            dragElement.style.left = Math.max(minBoundX, Math.min(offsetX + event.clientX - startX, maxBoundX)) + "px";
            dragElement.style.top = Math.max(minBoundY, Math.min(offsetY + event.clientY - startY, maxBoundY)) + "px";
        }

        // 5) Drop
        function OnMouseClickUp(event) {
            if (dragElement != null) {

                dragElement.style.zIndex = oldZIndex; // -> set Z-index 0.

                document.onmousemove = null;
                document.onselectstart = null;

                dragElement = null; // -> No more element to drag.
            }
        }
    </script>
    </div>
</body>
</html>
标签： javascripthtml
javascript - 如何检测可拖动的 HTML 元素是否位于边框的角落？

问题描述

解决方案

推荐阅读
