منع عنصر من "التقاط" الماوس باستخدام jQuery؟

Question

أحاول تغيير حجم كائن مضمن.تكمن المشكلة في أنه عندما يمرر الماوس فوق الكائن، فإنه يتحكم في الماوس، ويبتلع أحداث الحركة.والنتيجة هي أنه يمكنك توسيع القسم الذي يحتوي على الكائن، ولكن عندما تحاول تقليصه، إذا دخل الماوس إلى منطقة الكائن، يتوقف تغيير الحجم.

حاليًا، أقوم بإخفاء الكائن أثناء الحركة.أتساءل عما إذا كانت هناك طريقة لمنع الكائن من التقاط الماوس.ربما تراكب عنصر آخر فوقه يمنع أحداث الماوس من الوصول إلى الكائن المضمن؟

---

استخدام الظلال على تغيير الحجم لا يعمل مع الكائنات المضمنة، راجع للشغل.

---

إضافة مكافأة، حيث يبدو أنني لا أستطيع أن أنجح في هذا الأمر.للتجميع، ما عليك سوى القيام بما يلي:

قم بتوفير صفحة ويب تحتوي على ملف 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 Document Viewer أو ما شابه، لكنني تمكنت من التوصل إلى this working sample.إنها لا تستخدم فكرة التراكب، ولكنها عبارة عن ملف pdf يمكنك تغيير حجمه...

يحرر الشيء الذي جعل هذا العمل بدون التراكب هو wmode يتم تعيين المعلمة على transparent.لست على دراية بالتفاصيل حقًا ولكنها جعلتها تعمل بشكل جيد على IE7.يعمل أيضًا على Firefox وChrome وSafari وOpera.

تحرير جديد تواجه مشكلة خطيرة في جعلها تعمل مع الإطارات.بعض المعلومات التي وجدتها ليست مشجعة للغاية.هل من المستحيل الحصول عليه مع <object>؟أو <object> داخل إطار iframe؟

Answer 2

وأود أن الإجابة تراكب، ولكن سوف توفر الرمز الفعلي: P

وأنا أسميها "أتباع" بدلا من تراكب ويستخدم في بلدي ThreeSixty المكونات في لمسج (شفرة المصدر بسيط نوعا ما تقدم، سوف نفهم قراءة ما يحدث للشعبة "تابعا".

http://www.mathieusavard.info/threesixty

Answer 3

وتراكب.

وكلمة واحدة إجابات محظورة، هذه الجملة لا الفعل.

Answer 4

SmartLook هو بديل. انها مثل تلك الكتابات العلبة الخفيفة ولكن لمحتوى مضمن مثل ملفات PDF.

Answer 5

وهنا هو ما يعمل بالنسبة لي، على الرغم من يفعل إخفاء الإطار من حين تغيير الحجم. غير أن مشكلة بالنسبة لك؟

$(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 ()، فإنه عملت كبيرة مع نوافذ الأطر المدمجة بالنسبة لي.

ومع فايرفوكس - تراكب شفاف، اقترح كما سبق

.

Answer 7

وبفضل ميزة ستاكوفيرفلوو الجديدة "آخر آخر"، ورأيت أنك طلبت مني تقديم مثال التعليمات البرمجية. فعلت اختبار بسيط فقط (لا يمكن أن يبدو للحصول على التعليمات البرمجية لمضمنة في 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();
        }
    });
});