0

Javascript のネイティブ ドラッグを使用して、オブジェクトが画面/ウィンドウの右端から 60% 外れていることを検出するにはどうすればよいですか。それの40％が表示されていることを意味しますか？

60% とは、ウィンドウの現在の幅の 60% に等しいことを意味します。したがって、ウィンドウの現在の幅の 60% が非表示になっていて、ウィンドウの幅の 40% 以下が表示されている場合。

これは、スイートが jQuery コードである場合の条件として必要です。

私が試したのは、Pep.js プラグインとドラッグ オプション内の最初のプラグインを使用することです。それとコードの詳細は次のとおりです。ifステートメントでアラートが発生しても、ifステートメントのjQueryコードが実行されない

4

1 に答える 1

1

よし、来たぞ。

スクリプト：

window.onload = function () {
    var AniMove = function (doc, element) {
        var ox, oy, mx, my,
            w = element.offsetWidth,
            mouseMove = function (e) {
                e.preventDefault();
                if (element.offsetLeft + 0.4 * w > window.innerWidth) {
                    // 60% of the element's width is outside of the window now... do something
                    return;
                }               
                element.style.left = element.offsetLeft + e.clientX - mx + 'px';
                element.style.top = element.offsetTop + e.clientY - my + 'px';
                mx = e.clientX;
                my = e.clientY;
                return false;
            },
            mouseUp = function () {
                doc.removeEventListener('mousemove', mouseMove);
                doc.removeEventListener('mouseup', mouseUp);
                return;
            },
            mouseDown = function (e) {
                ox = mx = e.clientX;
                oy = my = e.clientY;
                doc.addEventListener('mousemove', mouseMove, false);
                doc.addEventListener('mouseup', mouseUp, false);
                return;
            };
        element.addEventListener('mousedown', mouseDown, false);
    },
    drag = new AniMove(document, document.getElementById('square'));    
}

そしてHTML：

<div id="square"></div>

最後に CSS:

DIV {
    position: fixed;
    width: 100px;
    height: 100px;
    background: #f00;
}

すべてが完了すると、jsFiddle にデモがあります。このスニペットに必要な情報がすべて含まれていることを願っています。

于 2013-06-13T19:58:04.697 に答える