Предотвратить элемент "захват" мыши с помощью jQuery?

Question

Я пытаюсь изменить размер встроенного объекта. Проблема в том, что когда мышь наводит курсор на объект, она берет на себя «контроль» мыши, поглощая события движения. В результате вы можете расширить div, содержащий объект, но при попытке уменьшить его, если мышь входит в область объекта, изменение размера останавливается.

В настоящее время я скрываю объект во время движения. Мне интересно, есть ли способ просто предотвратить захват объекта мышью. Возможно, наложение на него другого элемента, который не позволяет событиям мыши достигать встроенного объекта?

---

Использование ореолов при изменении размера не работает для встроенных объектов, кстати.

---

Добавление щедрости, так как я не могу заставить это работать. Чтобы собрать, просто сделайте следующее:

Предоставление веб-страницы с вложенным 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, операция изменения размера останавливается.

---

Есть несколько хороших ответов; если щедрость истощится до того, как я смогу проверить их все, я восстановлю щедрость (те же 150 баллов).

Answer 1

Что ж, мне совершенно не удалось найти пример средства просмотра документов XPS или еще много чего, но я смог найти this working sample. Он не использует идею наложения, но это PDF, размер которого вы можете изменить ...

edit то, что сделало эту работу без наложения, было параметром wmode, установленным на transparent Я не очень знаком с деталями, но это сделало его приятным на IE7. Также работает на Firefox, Chrome, Safari и Opera.

новое редактирование возникли серьезные проблемы при работе с фреймами. Некоторая информация, которую я нашел, не очень обнадеживает. Разве невозможно иметь его с <object>? Или <object> внутри iframe?

Answer 2

Я бы ответил на оверлей, но предоставлю фактический код: P

Я называю это «подписчик» вместо оверлея и используется в моем плагине ThreeSixty для jQuery (довольно простой исходный код, вы поймете, читая, что происходит с div «последователь».

http://www.mathieusavard.info/threesixty

Answer 3

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();
        }
    });
});

Answer 4

Благодаря новой функции 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>

Answer 5

С IE вы можете вызвать setCapture () / releaseCapture (), он отлично работал с iframes для меня.

С Firefox - прозрачное наложение, как уже предлагалось.

Answer 6

Вот то, что работает для меня, хотя это скрывает iframe при изменении размера. Это проблема для вас?

$(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(); }
    });
});

Answer 7

Возможно SmartLook является альтернативой. Это как те сценарии лайтбокса, но для встроенного контента, такого как pdfs.

Answer 8

Overlay.

Запрещено отвечать одним словом, в этом предложении нет глагола.