在javascript中检测元素是否偏离屏幕右边缘60％ [英] Detect if an element is 60% off the right edge of screen in javascript

问题描述

使用Javascript的本机拖动，如何检测对象何时偏离屏幕/窗口的右边缘60％.表示其中有40％在显示?

Using Javascript's native drag, how can I detect when an object is 60% off the right edge of the screen / window. Meaning 40% of it is showing?

60％的意思是等于窗口当前宽度的60％.因此，当隐藏窗口当前宽度的60％且显示窗口宽度的40％或更小时.

By 60%, I mean what is equal to 60% of the window's current width. So when the amount of 60% of the window's current width is hidden and 40% or less of the window's width is showing.

我需要将此作为条件，条件是谁的套件可以是jQuery代码.

I need to have this as an if condition who's suite can be jQuery code.

我尝试使用的是Pep.js插件，如果使用拖动选项，则使用第一个插件.该代码和代码的详细信息在这里:即使if语句出现警报，if语句中的jQuery代码也不会运行

What i've tried is using the Pep.js plugin and the first else if inside the drag option. That and the code is in more detail here: jQuery code in if statement not running even though alert in if statement happens

推荐答案

好的，来了.

脚本:

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上有了一个演示.我希望该代码段包含您需要的所有信息.

After all that done we have a demo at jsFiddle. I hope this snippet contains all the information you need.

这篇关于在javascript中检测元素是否偏离屏幕右边缘60％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！