¿Evita que un elemento "capture" el mouse usando jQuery?

Question

Estoy intentando cambiar el tamaño de un objeto incrustado. El problema es que cuando el mouse se desplaza sobre el objeto, toma " control " Del ratón, tragando eventos de movimiento. El resultado es que puede expandir el div que contiene el objeto, pero cuando intenta reducirlo, si el mouse ingresa al área del objeto, el cambio de tamaño se detiene.

Actualmente, oculto el objeto mientras me muevo. Me pregunto si hay una manera de evitar que el objeto capture el mouse. ¿Quizás superponer otro elemento encima que impida que los eventos del mouse lleguen al objeto incrustado?

---

el uso de fantasmas en el cambio de tamaño no funciona para los objetos incrustados, por cierto.

---

Agregando una recompensa, ya que parece que nunca puedo conseguir que esto funcione. Para recolectar, simplemente haga lo siguiente:

Proporcione una página web con un PDF incrustado, centrado en la página. El pdf no puede ocupar toda la página; hacer su ancho / alto 50% del ancho de la ventana del navegador o algo así.

Use jQuery 1.2.6 para agregar tamaño a cada lado y esquina del pdf.

El pdf NO DEBE CAPTAR EL RATÓN y dejar de arrastrar CUANDO SE ENCLAVE EL PDF. Eso significa que cuando hago clic en el borde del pdf y arrastro, cuando el ratón entra en el cuadro de visualización del pdf, la operación de cambio de tamaño continúa.

Esto debe funcionar en IE 7. Los hacks CSS condicionales (si gte ie7 o lo que sea) están bien.

---

Hmmm ... Estoy pensando que podría ser un problema con 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>

Esto no funciona. Cuando el mouse se desvía hacia el iframe, la operación de cambio de tamaño se detiene.

---

Hay algunas buenas respuestas; si la recompensa se agota antes de que pueda pasar a examinarlos a todos, restableceré la recompensa (los mismos 150 puntos).

Answer 1

Bueno, no pude encontrar un ejemplo de Visor de documentos XPS o qué, pero pude encontrar esta muestra de trabajo . No utiliza la idea de superposición, pero es un pdf que puede redimensionar ...

editar lo que hizo que esto funcionara sin la superposición fue que el wmode param se configuró como transparente . No estoy realmente familiarizado con los detalles pero lo hizo jugar bien en IE7. También funciona en Firefox, Chrome, Safari y Opera.

nueva edición tiene problemas serios para que funcione con marcos. Alguna información que he encontrado no es muy alentadora. ¿Es imposible tenerlo con un < object > ? O un < object > dentro del iframe?

Answer 2

Respondería a la superposición, pero proporcionaré el código real: P

Lo llamo " seguidor " en lugar de superposición, se usa en mi complemento ThreeSixty para jQuery (se proporciona un código fuente simple, entenderás lo que sucede con el " follower " div.

http://www.mathieusavard.info/threesixty

Answer 3

Superposición.

Respuestas de una palabra prohibidas, esta oración no es verbo.

Answer 4

Quizás SmartLook es una alternativa. Es como esos scripts de lightbox, pero para contenido incrustado como archivos PDF.

Answer 5

Esto es lo que me funciona, aunque oculta el iframe al cambiar el tamaño. ¿Es eso un problema para ti?

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

Con IE puedes llamar a setCapture () / releaseCapture (), funcionó muy bien con iframes para mí.

Con Firefox: superposición transparente, como ya se sugirió.

Answer 7

Gracias a la nueva " Actividad reciente " " característica, vi que me pidió que proporcionara un ejemplo de código. Solo realicé pruebas menores (parece que no puedo hacer que su código incluya el PDF en línea en IE, presumiblemente requiere un complemento PDF, que no tengo instalado), por lo que es posible que esto no funcione. Pero es un comienzo.

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