Impedir um elemento de “captar” o rato usando jQuery?

Question

Eu estou tentando redimensionar um objeto incorporado. A questão é que, quando os paira mouse sobre o objeto, é preciso "controle" do mouse, engolindo eventos de movimento. O resultado é que você pode expandir a div que contém o objeto, mas quando você tentar reduzi-lo, se o mouse entra na área do objeto as paradas de redimensionamento.

Atualmente, eu ocultar o objeto enquanto se move. Eu estou querendo saber se há uma maneira de simplesmente evitar o objeto de captura do mouse. Talvez sobrepondo outro elemento em cima dela que os eventos impede rato de alcançar o objeto incorporado?

---

usando imagens fantasma no redimensionamento não funciona para objetos incorporados, btw.

---

Adicionando uma recompensa, como eu não pode nunca parecem começar este trabalho. Para coletar, basta fazer o seguinte:

Fornecer uma página com um PDF embutido nele, centrado na página. O pdf não pode levar até a página inteira; fazer a sua largura / altura 50% da largura da janela do navegador ou algo assim.

Use jQuery 1.2.6 para adicionar redimensionamento para todos os lados e canto do pdf.

O pdf DEVE não captura o mouse e parar de arrastar QUANDO encolhendo o PDF. Isso significa que quando eu clicar na borda do pdf e arrastar, quando o mouse entra na caixa de exibição do pdf, a operação de redimensionamento continua.

Este trabalho must no IE 7. condicional CSS (se gte IE7 ou qualquer outro) hacks estão bem.

---

Hmmm ... Eu estou pensando que poderia ser um problema com 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>

Esta não funciona. Quando seus estáticas mouse na iframe a operação de redimensionamento pára.

---

Existem algumas boas respostas; Se a recompensa se esgote antes que eu possa dar a volta a vetar todos eles eu vou restabelecer a recompensa (mesmos 150 pontos).

Answer 1

Bem, eu era totalmente incapaz de encontrar um exemplo XPS Document Viewer ou outros enfeites, mas eu era capaz de chegar a this working sample . Ele não usa a idéia de sobreposição, mas é um pdf que você pode redimensionar ...

Editar a coisa que fez este trabalho sem a sobreposição estava sendo definida como wmode o param transparent. Eu realmente não estou familiarizado com os detalhes mas fez jogar bonito no IE7. Também funciona no Firefox, Chrome, Safari e Opera.

nova edição ter sérios problemas fazê-la funcionar com frames. Algumas informações que encontrei já não é muito animador. É impossível tê-lo com um <object>? Ou um <object> dentro do iframe?

Answer 2

Eu responderia sobreposição, mas irá fornecer código real: P

Eu chamo isso de "seguidor" em vez de sobreposição e é usado no meu ThreeSixty plug-in para jQuery (código fonte meio simples, desde que, você vai entender lendo o que é que acontece com o div "seguidor".

http://www.mathieusavard.info/threesixty

Answer 3

Overlay.

Uma palavra respostas proibida, esta frase não verbo.

Answer 4

Smartlook é uma alternativa. É como esses scripts Luz, mas para conteúdo incorporado, como pdfs.

Answer 5

Aqui está o que funciona para mim, porém, é se esconde o iframe enquanto o redimensionamento. Isso é um problema para você?

$(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

Com IE você pode chamar SetCapture () / releaseCapture (), funcionou muito bem com iframes para mim.

Com o Firefox -. Sobreposição transparente, como já foi sugerido

Answer 7

Graças ao novo recurso de StackOverflow "Atividade Recente", eu vi que você me pediu para fornecer um exemplo de código. Eu fiz apenas a testar menor (não consigo obter o seu código para inline o PDF no IE, presumivelmente ele requer um plugin PDF, que eu não tenha instalado), de modo que este não pode funcionar. Mas é um começo.

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