JQuery Draggable और IFrames (समाधान) पर आकार बदलने योग्य

Question

मैंने हाल ही में JQuery Draggable और Resizable प्लगइन का उपयोग करके कुछ परेशानियों में भाग लिया। समाधान की तलाश में, मुझे कई अलग-अलग स्थानों में कुछ बहुत खंडित कोड मिला और अंत में एक स्वच्छ समाधान के लिए दायर किया गया जो मेरे लिए लगभग पूरी तरह से काम करता है।

मैंने सोचा कि मैं किसी और के लिए अपने निष्कर्ष साझा करूंगा, क्या उन्हें इस मुद्दे पर भी आना चाहिए।

मेरे पास एक div है जिसमें IFrame है। यह div आकार बदलने योग्य और खींचने योग्य होना चाहिए। काफी सरल - तो जैसे div को खींचने योग्य और आकार बदलने योग्य jQuery जोड़ें:

$("#Div").draggable(); 
$("#Div").resizable(); 

सभी ठीक जब तक आप एक iframe युक्त एक और div के ऊपर खींच सकते हैं या अपने वर्तमान div आकार बदलने के लिए, अपने वर्तमान iframe से अधिक ले जाकर कोशिश है। एक आईफ्रेम पर जब दोनों कार्य रोकें।

समाधान:

$("#Div").draggable({ 
    start: function() { 
     $(".AllContainerDivs").each(function (index, element) { 
     var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>'); 
     $(element).append(d);}); 
    }, 
    stop: function() { 
     $('.iframeCover').remove(); 
    } 
}); 



$("#Div").resizable({ 
    start: function() { 
     $(".AllContainerDivs").each(function (index, element) { 
      var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>'); 
      $(element).append(d); 
     }); 
    }, 
    stop: function() { 
     $('.iframeCover').remove(); 
    } 
}); 

का आनंद लें!

पुनश्च: कुछ अतिरिक्त कोड खिड़कियां, जो जब चुना जाता है, अन्य draggables के सामने में लाया जाता है बनाने के लिए:

खींचने योग्य शुरू समारोह में -

var maxZ = 1; 
$(".AllContainerDivs").each(function (index, element) { 
    if ($(element).css("z-index") > maxZ) { 
     maxZ = $(element).css("z-index"); 
    } 
}); 
$(this).css("z-index", maxZ + 1); 

Answer 1

तरीकों की एक संख्या हैं इसे प्राप्त करने के लिए, सभी आपकी आवश्यकताओं के आधार पर। मुझे लगता है कि कई खिड़कियों का आकार बदलना/खींचना यूआई को बहुत धीमा कर देता है, और इस तरह मैंने नेविगेशन की सहायता के लिए सीमा के साथ आकार बदलने/खींचने के लिए आइफ्रेम छिपाने को समाप्त कर दिया।

कुछ jquery प्लगइन्स हैं जो इस कार्यक्षमता का हिस्सा प्राप्त करते हैं, लेकिन iframes के साथ कई संघर्ष।

सामने लाने के लिए भी अंक पर सुधार किया जा सकता है और सभी स्थितियों में काम नहीं कर सकता है।

$('#Div').draggable({ iframeFix: true }); 

यह काम करना चाहिए:

Answer 2

इस प्रयास करें।

Answer 3

मैं पहली बार भी बायरन कॉब के समाधान की तरह चला गया, लेकिन जैसा कि मैंने एक संवाद तत्व उपयोग कर रहा हूँ और Iframe की जरूरत नहीं है जब संवाद नहीं दिखाया जाता है (यह एक बचत संवाद है), मैं modal विकल्प का उपयोग कर इसे पसंद किया:

$('#savingDialog').dialog({ 
    modal: true 
}); 

Answer 4

इतना कठिन क्यों? वहाँ बहुत अधिक सुंदर समाधान है:

• कुछ z- सूचकांक के साथ रिश्तेदार div के अंदर अपने आइफ्रेम शब्दों में कहें, 0
• मेकअप आइफ्रेम रिश्तेदार भी कहना है और बदल खींच दौरान यह z- सूचकांक -1 है:

कोड:

$("#Div").draggable({ 
    start: function() { 
     $("iframe").css('z-index', '-1'); 
    }, 
    stop: function() { 
     $("iframe").css('z-index', '0'); 
    } 
}); 

Answer 5

क्या मेरे द्वारा की गई body.dragging iframe {pointer-events: none;} को परिभाषित तो dragstart घटना पर शरीर के लिए dragging वर्ग जोड़ सकते हैं और dragend घटना पर इसे हटाने है।

मेरे लिए ठीक, यकीन नहीं काम करता है कारण है कि यह पहले उल्लेख नहीं किया गया था, जहाँ तक मैं सूचक-घटनाओं बता सकते हैं सीएसएस संपत्ति 2010