0

次の関数を使用して、div をハンドルでドラッグしています。

function enableDragging(ele) {
    var dragging = dragging || false,
        x, y, Ox, Oy,
        current;
    enableDragging.z = enableDragging.z || 1;
    var grabber = document.getElementById("wrapId");
    grabber.onmousedown = function (ev) {
        ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        current = target.parentNode;
        dragging = true;
        x = ev.clientX;
        y = ev.clientY;
        Ox = current.offsetLeft;
        Oy = current.offsetTop;
        current.style.zIndex = ++enableDragging.z;

        document.onmousemove = function (ev) {
            ev = ev || window.event;
            pauseEvent(ev);
            if (dragging == true) {

                var Sx = ev.clientX - x + Ox,
                    Sy = ev.clientY - y + Oy;

                current.style.left = Math.max(Sx, Math.min(document.body.offsetWidth - Sx, 0)) + "px";
                current.style.top = Math.max(Sy, Math.min(document.body.offsetHeight - Sy, 0)) + "px";
                document.body.focus();
                document.onselectstart = function () {
                    return false;
                };
                ev.ondragstart = function () {
                    return false;
                };
                document.body.style.MozUserSelect = "none";
                document.body.style.cursor = "default";
                return false;
            }
        }
        document.ondragstart = function () {
            return false;
        }
        document.onmouseup = function (ev) {
            ev = ev || window.event;
            dragging && (dragging = false);
            if (ev.preventDefault) {
                ev.preventDefault();
            } else {
                e.cancelBubble = true;
                e.returnValue = false;
            }

            document.body.style.MozUserSelect = "text";
            document.body.style.cursor = "default";
            //toggleEnableSelectStart(true);
            return false;
        }
    };
}

実際のブラウザー ウィンドウの境界の外に div をドラッグできないように境界を設定しようとしています。

上記の関数は、これの 50% を達成しました。ユーザーが div を左上と左の境界の外にドラッグすることはできません。ただし、ユーザーが下と右の外側にドラッグしたままにしました..

これを修正する方法はありますか？

4

1 に答える 1

1

ウィンドウの幅/高さの境界から div の幅/高さを引いて計算した値の間の最小値を取得します。

current.style.left = Math.min(Math.max(Sx, Math.min(document.body.offsetWidth - Sx, 0)), document.body.offsetWidth - current.offsetWidth) + "px";
current.style.top = Math.min(Math.max(Sy, Math.min(document.body.offsetHeight - Sy, 0)), document.body.offsetHeight - current.offsetHeight) + "px";

編集：

これらの線に沿った何か（注意してください、これはあなたのものと同じ形式ではなく、簡単に書かれています！）

http://jsfiddle.net/WKLa7/1/

于 2013-03-03T20:14:05.147 に答える