jquery draggable और resizable containment

Question

मैं एक div को jquery के साथ पुनः आकार देने योग्य और खींचने योग्य बनाने की कोशिश कर रहा हूं। हालांकि कार्यान्वयन बहुत छोटी गाड़ी लग रहा है।

मुझे कई समान प्रश्न मिले, लेकिन कोई समाधान नहीं मिला।

• In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?
• Resizing a JQuery Draggable element's containment parent while dragging

मैं कई position विन्यास उपयोग करने की कोशिश है और यह भी refreshPositions विकल्प की कोशिश की, कुछ भी नहीं काम किया।

कीड़े मैं अनुभव:

• जब बच्चा आइटम चलती तेजी से (विशेष रूप से जब हलकों में घूम रहा है), यह अक्सर टूट जाता है और रोकथाम से बाहर रहता है।
• बच्चे को निचले दाएं कोने में ले जाने पर, फिर बच्चे को कोने से बाहर खींचने की कोशिश करते हुए, प्रत्येक पुनरावृत्ति में बच्चे को रोकथाम तोड़ देता है
• जब रोकथाम टूट जाती है, तो अगली पर खींचें, आप इस टूटी हुई रोकथाम क्षेत्र में भी खींच सकते हैं

मैंने उदाहरण को कम किया है।
यह सभी ब्राउज़रों में पुन: उत्पन्न होता है, हालांकि सभी आईई 10 और ओपेरा में टूटना प्रतीत होता है।

$(".child") 
    .draggable({ 
    containment: "parent", 
    cursor: "move" 
}).resizable({ 
    handles: "s,e", 
    containment: "parent", 
    minHeight: 50, 
    minWidth: 50 
}); 

यहां एक पूर्ण लेकिन सरल उदाहरण के लिए देखें।

http://jsfiddle.net/jxY8M/

मैं इस रोकथाम मुद्दे को ठीक कर सकता है?

Answer 1

यह मुद्दा पहले से ही here

अपने मामले में फिक्स कर रहे हैं (कम से कम Chrome का नवीनतम संस्करण में जो मैं पर काम कर रहा हूँ)

सूचित किया गया है यूआई खींचने योग्य ही साथ एक समस्या है

1. माता-पिता के लिए एक 5px padding जोड़ें, demo found here
2. माता-पिता के लिए एक 5px border जोड़ें, demo found here
3. एक 5px ०१२३७७९७२४ जोड़े बच्चे को, demo found here
4. एक 5px वृद्धि
के लिए उपरोक्त में से किसी मिश्रण
5. overflow:hidden माता पिता, demo found here में जोड़े। मुझे नहीं पता कि यह क्यों काम करता है, लेकिन ऐसा लगता है कि यह काम पूरी तरह से

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

Answer 2

पर काम करना प्रतीत होता है आप आकार बदलने योग्य पैरामीटर को बदलने के लिए ड्रैगगेबल इंटरैक्शन पर स्टॉप फ़ंक्शन का उपयोग करने का प्रयास कर सकते हैं। इससे मुझे मदद मिली जब मुझे दोनों समान समस्याएं थीं जब दोनों आकार बदलने योग्य और खींचने योग्य इंटरैक्शन पर रोक लगाई गई थी।

नोट: यह आकार बदलने योग्य बातचीत पर लॉक पहलू अनुपात के साथ भी काम करता है।

नमूना:

<div id="container" style="width: 320px; height: 240px; background-color: #000000;"> 
    <div id="subject" style="width: 240px; height: 180px; background-color: #ffffff;"> 
    </div> 
</div> 

<script type="text/javascript" language="javascript"> 
jQuery(document).ready(function() { 
    jQuery("#subject").resizable(
    { 
     aspectRatio: 4/3, 
     minHeight: 120, 
     minWidth: 160, 
     maxHeight: 240, 
     maxWidth: 320 
    }).draggable(
    { 
     containment: "#container", 
     stop: function(evt, ui) { 
      var container = jQuery("#container"); 
      var subject = jQuery("#subject"); 

      var containerPosition = container.position(); 
      var subjectPosition = subject.position(); 

      var relativeLeft = subjectPosition.left - containerPosition.left; 
      var relativeTop = subjectPosition.top - containerPosition.top; 

      var maxWidth = (container.width() - relativeLeft) | 0; 
      var maxHeight = (container.height() - relativeTop) | 0; 

      subject.resizable("option", "maxWidth", maxWidth); 
      subject.resizable("option", "maxHeight", maxHeight); 
     } 
    }); 
}); 
</script> 

Answer 3

In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously? बंद कर दिया है, लेकिन यह समस्या का समाधान है:

माता-पिता/कंटेनर के लिए position:relative जोड़ें।

overflow:hidden (Firefox में, अभी तक अन्य ब्राउज़रों का परीक्षण नहीं किया) मेरे लिए काम नहीं किया