Impedire a un elemento di "catturare" il mouse usando jQuery?

Question

Sto cercando di ridimensionare un oggetto incorporato. Il problema è che quando il mouse passa sopra l'oggetto, prende "controllo". del mouse, ingoiando eventi di movimento. Il risultato è che puoi espandere il div contenente l'oggetto, ma quando provi a ridurlo, se il mouse entra nell'area dell'oggetto il ridimensionamento si interrompe.

Attualmente, nascondo l'oggetto mentre mi muovo. Mi chiedo se c'è un modo per impedire all'oggetto di catturare il mouse. Forse sovrapponendo un altro elemento sopra di esso che impedisce agli eventi del mouse di raggiungere l'oggetto incorporato?

---

l'uso del ghosting sul ridimensionamento non funziona per gli oggetti incorporati, tra l'altro.

---

Aggiungendo una taglia, poiché non riesco mai a farlo funzionare. Per raccogliere, procedi semplicemente come segue:

Fornisci una pagina web con un PDF incorporato, centrato sulla pagina. Il pdf non può occupare l'intera pagina; rendere la sua larghezza / altezza del 50% la larghezza della finestra del browser o qualcosa del genere.

Usa jQuery 1.2.6 per aggiungere il ridimensionamento su ogni lato e angolo del pdf.

Il pdf NON DEVE CATTURARE IL MOUSE e smettere di trascinare QUANDO SI STAZZANDO IL PDF. Ciò significa che quando faccio clic sul bordo del pdf e trascino, quando il mouse entra nella casella di visualizzazione del pdf, l'operazione di ridimensionamento continua.

Questo deve funzionare in IE 7. Gli hack CSS condizionali (se gte ie7 o altro) vanno bene.

---

Hmmm ... Sto pensando che potrebbe essere 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>

Questo non funziona. Quando il mouse si sposta nell'iframe, l'operazione di ridimensionamento si interrompe.

---

Ci sono alcune buone risposte; se la taglia si esaurisce prima che riesca ad andare in giro per vagliarli tutti, ripristinerò la taglia (stessi 150 punti).

Answer 1

Beh, non sono stato assolutamente in grado di trovare un esempio XPS Document Viewer o altro, ma sono stato in grado di trovare questo esempio funzionante . Non usa l'idea di overlay, ma è un pdf che puoi ridimensionare ...

modifica la cosa che ha fatto funzionare questo senza overlay era il parametro wmode impostato su trasparente . Non ho molta familiarità con i dettagli, ma ha funzionato bene su IE7. Funziona anche su Firefox, Chrome, Safari e Opera.

nuova modifica ha gravi problemi a farla funzionare con i frame. Alcune informazioni che ho trovato non sono molto incoraggianti. È impossibile averlo con un < object > ? O un < object > all'interno dell'iframe?

Answer 2

Risponderei overlay, ma fornirò il codice attuale: P

Lo chiamo " follower " invece di overlay e viene utilizzato nel mio plug-in ThreeSixty per jQuery (un po 'di semplice codice sorgente fornito, capirai la lettura di ciò che accade al div "quoter follower"

http://www.mathieusavard.info/threesixty

Answer 3

Sovrapposizione.

Risposte a una parola vietate, questa frase non è verbo.

Answer 4

Forse SmartLook è un'alternativa. È come quegli script lightbox ma per contenuti incorporati come i pdf.

Answer 5

Ecco cosa funziona per me, anche se è nascondere l'iframe durante il ridimensionamento. È un problema per te?

$(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 puoi chiamare setCapture () / releaseCapture (), ha funzionato benissimo con iframe per me.

Con Firefox: overlay trasparente, come già suggerito.

Answer 7

Grazie alla nuova " attività recente " di StackOverflow Ho visto che mi hai chiesto di fornire un esempio di codice. Ho eseguito solo test minori (non riesco a ottenere il tuo codice per incorporare il PDF in IE, presumibilmente richiede un plug-in PDF, che non ho installato), quindi potrebbe non funzionare. Ma è un inizio.

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