纯javascript：为可拖动元素设置边框

你好

学习Javascript并尝试在容器中创建可拖动的元素

如何设置可拖动边框，使元素不能移出边框？ 现在我有一个问题，当你把东西拖到底部或右边框时，元素会移出容器。

我的HTML如下所示：

<div id="container">
    <div id="comboCon1"></div>
    <div id="comboCon2"></div>
</div>

下面是关于MouseMove的

事件：

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";
}

为了解决这个问题，css中有一点变化，因为您使用的是f position“relative”，将容器的偏移量指定给拖动的子容器
因此，在我的put drag元素处于绝对位置时，将offsetWidth更改为clientWidth，并且似乎可以工作（水平）：

非常感谢，它确实有用！现在，我只需要理解clientWidth和offsetWidth之间的区别。在您的情况下，似乎没有影响，因为高度可以正常工作，并且它没有改变，用于offsetWidth。不同的值用于填充和/或不计算HtmleElement的宽度
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";
}

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

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


    // 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 = "500px";
    document.getElementById("container").style.height = "500px";

    //////////////////////
    // 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.
            console.log(target.parentNode.getBoundingClientRect(), target)
            minBoundY = target.parentNode.offsetTop;

            maxBoundX = minBoundX + target.parentNode.clientWidth - target.clientWidth; // Maximal.
            console.log(maxBoundX, target.parentNode.clientWidth, target.clientWidth);
            maxBoundY = minBoundY + target.parentNode.offsetHeight - target.offsetHeight;



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

            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.
        }
    }