Question

美好的一天，

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

如何设置可拖动边框，以便元素无法移出它？现在我有一个问题，当你将东西拖到底部或右边框时，元素移动到容器外面。 fiddle

我的HTML看起来像这样：

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

以下是我获取所有职位并致电onmousemove事件的函数：

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

Answer 1

解决这个问题的css有一点变化，因为你正在使用f position＆＃34; relative＆＃34;给孩子的容器的偏移量被淹没了所以在我的demo中将drag元素置于绝对位置，并更改clientWidth的offsetWidth并且看起来有效（水平）：

// 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：设置可拖动元素的边框

1 个答案: