요소가 jQuery를 사용하여 마우스를 "캡처"하는 것을 방지합니까?

StackOverflow https://stackoverflow.com/questions/175892

문제

나는 내장 된 개체를 크기를 조정하려고합니다. 문제는 마우스가 물체 위로 맴돌 때 마우스의 "제어"를 취하여 움직임 이벤트를 삼키는 것입니다. 결과는 물체가 포함 된 DIV를 확장 할 수 있지만, 수축하려고 할 때 마우스가 물체의 영역에 들어가면 크기 조정이 중단됩니다.

현재 움직일 때 물체를 숨 깁니다. 물체가 마우스를 캡처하는 것을 막는 방법이 있는지 궁금합니다. 아마도 마우스 이벤트가 임베디드 물체에 도달하는 것을 방지하는 다른 요소를 오버레이할까요?

크기 조정에서 고스트링을 사용하는 것은 내장 된 물체 인 BTW에서 작동하지 않습니다.

내가이 일을 할 수없는 것처럼 보이기 때문에 현상금을 추가합니다. 수집하려면 다음을 수행하십시오.

페이지를 중심으로 PDF가 포함 된 웹 페이지를 제공하십시오. PDF는 전체 페이지를 가져갈 수 없습니다. 너비/높이를 50% 브라우저 창의 너비 또는 무언가로 만듭니다.

jQuery 1.2.6을 사용하여 PDF의 모든 측면과 모서리에 크기를 추가하십시오.

PDF는 마우스를 캡처하고 PDF를 축소 할 때 드래그를 중지해서는 안됩니다. 즉, PDF의 가장자리를 클릭하고 드래그하면 마우스가 PDF의 디스플레이 상자에 들어가면 크기 조정 작업이 계속됩니다.

이것은 IE 7에서 작동해야합니다. 조건부 CSS (GTE IE7 이상) 해킹은 괜찮습니다.

흠 ... Iframe의 문제라고 생각합니다 ...

    <div style="text-align:center; padding-top:50px;">
    <div id="doc" style="width:384px;height:512px;">
    <iframe id="docFrame" style="width: 100%; height: 100%;"
 src='http://www.ready.gov/america/_downloads/sampleplan.pdf'>
    </iframe></div></div>
    <div id="data"></div>
    <script type="text/javascript">
        $(document).ready(function() {
        var obj = $('#docFrame');
            $('#doc').resizable({handles:'all', resize: function(e, ui) {
                $('#data').html(ui.size.width + 'x' + ui.size.height);
                obj.attr({width: ui.size.width, height: ui.size.height});
            }});
        });
    </script>

이것은 작동하지 않습니다. 마우스가 iframe에 길을 잃으면 크기 조정 작업이 중지됩니다.

좋은 대답이 있습니다. 현상금이 다 떨어지면 그들 모두를 심사하기 전에 모든 것을 심사 할 수 있습니다.

도움이 되었습니까?

해결책

글쎄, 나는 완전히 XPS 문서 뷰어 예제를 찾을 수 없었지만 무엇을 생각해 낼 수있었습니다. this working sample. 오버레이 아이디어를 사용하지는 않지만 크기를 조정할 수있는 PDF입니다.

편집하다 오버레이 없이이 작업을 만든 것은 wmode 매개 변수가 설정 중입니다 transparent. 나는 세부 사항에 정말 익숙하지 않지만 IE7에서 멋지게 연주했습니다. 또한 Firefox, Chrome, Safari 및 Opera에서도 작동합니다.

새 편집 프레임으로 작동하는 데 심각한 어려움이 있습니다. 내가 찾은 일부 정보는 그다지 고무적이지 않습니다. 그것을 가지고있는 것은 불가능합니까? <object>? 또는 <object> Iframe 내부?

다른 팁

나는 오버레이에 대답하지만 실제 코드를 제공 할 것입니다 : P

나는 그것을 오버레이 대신 "팔로워"라고 부르며 jQuery의 Threeixty 플러그인에 사용됩니다 (간단한 소스 코드 제공 제공, 당신은 "추종자"div에 무슨 일이 일어나는지 읽는 것을 이해할 것입니다.

http://www.mathieusavard.info/threesixty

위에 까는 것.

한 단어는 금지되어 있으며,이 문장은 동사가 없습니다.

아마도 SmartLook 대안입니다. 그것은 Lightbox 스크립트와 같지만 PDF와 같은 내장 된 컨텐츠 용입니다.

비록 저에게 효과가있는 것은 다음과 같습니다. 그게 당신에게 문제가 있습니까?

$(document).ready(function() {
    var obj = $('#docFrame');
    $('#doc').resizable(
    { 
        handles: 'all', 
        resize: function(e, ui) {
            $('#data').html(ui.size.width + 'x' + ui.size.height);
            obj.attr({ width: ui.size.width, height: ui.size.height });
        },
        start: function(e, ui) { $('#docFrame').hide(); },
        stop: function(e, ui) { $('#docFrame').show(); }
    });
});

IE를 사용하면 setCapture ()/reeleasecapture ()를 호출 할 수 있습니다. iframes와 함께 잘 작동했습니다.

Firefox와 함께 - 이미 제안한대로 투명한 오버레이.

STACKOVERFLOW의 새로운 "최근 활동"기능 덕분에 코드 예제를 제공 해달라고 요청했습니다. 나는 작은 테스트 만했을 때 (즉, 코드가 PDF를 IE로 인라인 할 수는 없지만, 아마도 설치되지 않은 PDF 플러그인이 필요할 것입니다). 그러나 그것은 시작입니다.

<div style="text-align: center; padding-top: 50px;">
    <div id="doc" style="width: 384px; height: 512px; position: relative;">
        <div id="overlay" style="position: absolute; top: -5px; left: -5px;
            padding: 5px; width: 100%; height: 100%; background: red;
            opacity: 0.5; z-index: 1; display: none;"></div>
        <iframe id="docFrame" style="width: 100%; height: 100%; position: relative; z-index: 0;"
            src='http://www.ready.gov/america/_downloads/sampleplan.pdf'></iframe>
    </div>
</div>
<div id="data"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var obj = $('#docFrame'), overlay = $('#overlay');
        $('#doc').resizable({
            handles: 'all',
            start: function() {
                overlay.show();
            },
            resize: function(e, ui) {
                $('#data').html(ui.size.width + 'x' + ui.size.height);
                obj.attr({
                    width: ui.size.width,
                    height: ui.size.height
                });
            },
            stop: function(e, ui) {
                overlay.hide();
            }
        });
    });
</script>

var dframe = $("#docFrame");

$(document).ready(function () {
    var b = dframe;
    $("#doc").e({
        b: "all",
        resize: function (c, a) {
            $("#data").html(a.size.width + "x" + a.size.height);
            object.attr({
                width: a.size.width,
                height: a.size.height
            });
        },
        start: function () {
            dframe.hide();
        },
        stop: function () {
            dframe.show();
        }
    });
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top