Question

我有一个任务，我必须创建两个盒子，一个在另一个里面。较小的（内部）盒子应该能够在容器盒内部使用mousedrag自由移动。较小的盒子不应该离开较大的盒子。我已经弄清楚了第一部分（移动盒子）但是不能弄明白第二部分？我确定我只是忽略了一些简单的东西，所以任何提示都会受到赞赏。这是我的代码。

window.onload = init;
var mousePiece = null;

function init() {
    var box = document.getElementById("box");
    container = document.getElementById("container");

    box.style.top = getStyle(box,"top");
    box.style.left = getStyle(box,"left");
    box.style.height = getStyle(box,"height");
    box.style.width = getStyle(box,"width");

    container.style.top = getStyle(container,"top");
    container.style.left = getStyle(container,"left");
    container.style.height = getStyle(container,"height");
    container.style.width = getStyle(container,"width");


    addEvent(box, "mousedown", mouseGrab, false);
}

function mouseGrab(e) {
    var evt = e || window.event;
    mousePiece = evt.target || evt.srcElement;

    addEvent(document, "mousemove", mouseMove, false);
    addEvent(document, "mouseup", mouseDrop, false);
}

function mouseMove(e) {
    var evt = e || window.event;
    var mouseX = evt.clientX;
    var mouseY = evt.clientY;

        mousePiece.style.left = mouseX - 25 + "px";
        mousePiece.style.top = mouseY - 25 + "px";
}

function mouseDrop(e) {
    mousePiece = null;
    removeEvent(document, "mousemove", mouseMove, false);
    removeEvent(document, "mouseup", mouseDrop, false);
}

function addEvent(object, evName, fnName, cap) {
    if (object.attachEvent)
        object.attachEvent("on" + evName, fnName);
    else if (object.addEventListener)
        object.addEventListener(evName, fnName, cap);
}

function removeEvent(object, evName, fnName, cap) {
    if (object.detachEvent)
        object.detachEvent("on" + evName, fnName);
    else if (object.removeEventListener)
        object.removeEventListener(evName, fnName, cap);
}

function getStyle(object, styleName) {
    if (window.getComputedStyle) {
        return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
    } else if (object.currentStyle) {
        return object.currentStyle[styleName]
    }
}

谢谢，杰西。

Answer 1

在mousemove函数中，您必须进行测试以查看新位置是否落在容器之外，以及是否在将值分配给框之前更改了值。

请参阅http://jsfiddle.net/gaby/eutk9u48/

小提琴的解释

在init函数内部，我们使用容器的左/上/右/下位置填充名为limit的对象（，在顶部声明） 以便于参考）

// parseInt is used to get the numbers without the 'px' at the end
// so we can perform numeric comparisons with it
limits.top = parseInt(container.style.top); 
limits.left = parseInt(container.style.left);
limits.right = limits.left + parseInt(container.style.width);
limits.bottom = limits.top + parseInt(container.style.height);

然后在mousemove方法中我们

var newX = mouseX - 25; // store the new X position based on mouse
var newY = mouseY - 25; // store the new Y position based on mouse

// make sure the newX does not go past the right side of the container
// by keeping whichever is smaller 
// if the newX we got from the mouse is larger than the right side of the container
// then we force the newX to become equal to the right side.
newX = Math.min(newX, limits.right); 

// The same principle applies to the left side but we now need to keep the larger value
// of newX or the left side of the container
newX = Math.max(newX, limits.left);

// same logic for top/bottom 
newY = Math.min(newY, limits.bottom);
newY = Math.max(newY, limits.top);

在父div周围移动框

1 个答案: