纯JavaScript:设置可拖动元素的边框 [英] Pure javascript: Set border for draggable elements

问题描述

美好的一天，

学习Javascript并尝试在容器内制作可拖动元素.

Learning Javascript and trying to make draggable elements inside a container.

如何设置可拖动边框，以使元素无法在其外部移动?现在，当您将某些东西拖动到底部或右侧边框时，我遇到了问题，该元素移出了容器.小提琴

How to set the draggable border so that elements won't be able to move outside it ? Right now i have a problem when you drag something to the bottom or right border the element moves outside the container. fiddle

我的HTML看起来像这样:

my HTML looks like this :

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

这是我获取所有职位并调用 onmousemove 事件的函数:

Here is the function where i get all positions and call the onmousemove Event :

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

这是 onmousemove 事件:

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进行了一些更改，因为您使用的是相对"位置，因此拖动了容器向孩子的偏移量因此，在我的演示中，将拖动元素放置在绝对位置，并更改clientWidth的offsetWidth并看起来可行(水平):

there is a little change in css for solve this problem, because you are usingf position "relative" the offset of container is given to the child is draged so in my demo put drag element in position absolute, and change offsetWidth for clientWidth and seems works ( horizontal):

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

这篇关于纯JavaScript:设置可拖动元素的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！