Запретить элементу "захватывать” мышь с помощью 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 или еще много чего, но я смог придумать этот рабочий пример . Он не использует идею наложения, но это PDF, размер которого вы можете изменить ...

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

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

Answer 2

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

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

http://www.mathieusavard.info/threesixty

Answer 3

Наложение.

Одно слово ответа запрещено, в этом предложении нет глагола.

Answer 4

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

Answer 5

Вот что работает для меня, хотя и скрывает 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 6

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

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

Answer 7

Благодаря новой " Недавней активности 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 8

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