JQuery UI draggable: एक तरफ

Question

पर रोकथाम से अधिक है मैं आकार बदलने योग्य/खींचने योग्य तत्वों को लागू करने के लिए JQuery UI का उपयोग कर रहा हूं। अब मैं इन तत्वों के लिए एक रोकथाम को परिभाषित करना चाहता हूं जो बिल्कुल तीन (!) पक्षों पर आकार बदलने/खींचने को सीमित करता है। जैसे इस JSFiddle example पर एक नज़र डालें। आप देख सकते हैं कि निहित तत्व केवल माता-पिता के क्षेत्र में ही आकार/खींचा जा सकता है।

मैं क्या प्राप्त करने के लिए चाहते हैं कि तत्व नीचे सीमा से अधिक कर सकते हैं और माता पिता के नीचे सीमा से परे करने के लिए ले जाया जा रहा है। फिर भी आकार बदलने/ड्रैगिंग को अभी भी शीर्ष, दाएं और बाएं किनारे पर सीमित किया जाना चाहिए जैसा माता-पिता के अनुसार सीमाओं द्वारा निर्धारित किया गया है।

तो this modification क्या मैं के साथ आया है:

// resizable/draggable option 
resize/drag : function(event, ui) { 
    expandParent("#parentElement", "#dragElement"); 
} 

function expandParent(parentName, childName) { 
    var dragEl = $(childName); 
    var dragElTop = parseInt(dragEl.css("top"), 10); 
    var dragElHeight = parseInt(dragEl.css("height"), 10); 
    var dragElBottom = dragElTop + dragElHeight; 
    var parentEl = $(parentName); 
    var parentElBottom = parseInt(parentEl.css("height")); 
    if(parentElBottom <= dragElBottom + 20) { 
     parentEl.css("height", "+=2"); 
    } 
} 

आप नीचे सीमा आप देखते हैं कि माता-पिता के क्षेत्र अगर बच्चे भी माता-पिता के नीचे सीमा के करीब हो जाता है का विस्तार किया है के साथ चारों ओर खेलते हैं। दुर्भाग्य से यह 20 पिक्सेल के बाद बंद हो जाता है। फिर आपको क्षेत्र को आगे बढ़ाने के लिए माउस बटन को छोड़ना और फिर से आकार/खींचना होगा। क्या आपको कोई विचार है कि वह क्यों है?

Answer 1

खैर कि expandParent समारोह काम करने के लिए, क्योंकि कंटेनर सीमाओं JQuery यूआई द्वारा स्थापित किया गया है और जब तक आप माउस छोड़ दें यह अद्यतन किया जा नहीं होते नहीं जा रहा है।

तो मैं दो समाधान के बारे में सोच सकते यहाँ एक सुंदर है और अन्य मुश्किल

जाहिर सुरुचिपूर्ण समाधान अपने खुद युक्त तरीका है जिसके निचले भाग में नि: शुल्क है लेखन किया जाएगा है।

लेकिन अब मेरे पास एक डमी पैरेंट तत्व का उपयोग करके एक कठिन समाधान है और इसकी ऊंचाई 1000 या खिड़की की ऊंचाई जैसे बड़े मूल्य पर सेट करें और फिर वास्तविक माता-पिता के लिए अतिप्रवाह छिपी हुई विशेषता सेट करें।

यहाँ मेरी समाधान है:

<div id="parentElement"> 
    <div id="dummy-parent"> 
     <div id="dragElement" class="dragClass"> 
      <p>Drag me around!</p> 
     </div> 
    </div> 
</div> 



function expandParent(parentName, childName) { 
    var dragEl = $(childName); 
    var parentEl = $(parentName); 
    var dragElHeight=dragEl.height(); 
    if(parentEl.height() <= dragElHeight) { 
     parentEl.height(dragElHeight); 
    } 
} 

Check the JS Fiddle

आपको अपने एप्लिकेशन को मैं सिर्फ आप के बिना अपने कोड या कुछ भी परीक्षण किया हो रही है विचार

Answer 2

ऐसा लगता है कि JQuery यूआई के अंदर वे खींचें की शुरुआत में माता-पिता की जानकारी रखने के लिए, तो भले ही आप आकार बदलने यह अभी भी खींचें को प्रतिबंधित करेगा।

यह तय करने के लिए कि आप अपना खुद का रोकथाम बाध्यकारी बॉक्स सेट कर सकते हैं।

$("#dragElement") 
    .draggable({ 
     cursor  : "move", 
     scroll  : false, 
     containment : [20, 20, 400+20, 1000], 
     drag : function(event, ui) { 
      expandParent("#parentElement", "#dragElement"); 
     } 
    }) 
    .resizable({ 
     containment : "parent", 
     resize : function(event, ui) { 
      expandParent("#parentElement", "#dragElement"); 
     } 
    }); 

function expandParent(parentName, childName) { 
    var dragEl = $(childName); 
    var dragElTop = parseInt(dragEl.css("top"), 10); 
    var dragElHeight = parseInt(dragEl.css("height"), 10); 
    var dragElBottom = dragElTop + dragElHeight; 
    var parentEl = $(parentName); 
    var parentElBottom = parseInt(parentEl.css("height")); 
    if(parentElBottom <= dragElBottom + 20) { 
     parentEl.css("height", dragElBottom+20); 
    } 
} 

ऊपर कोड साथ

, यह ऊंचाई में 1000 + 20 माता-पिता तक की आकार बदलने की अनुमति देगा। आप उपरोक्त कोड here (JSFiddle) को आजमा सकते हैं।

तो शुरुआत में, एक गतिशील कंटेनर करने के लिए की जरूरत है (और आकार बदलने के विधि में), नए कंटेनर सही BoundingBox के साथ सेट।

var p = $("#parentElement"); 
var dragWidth = parseInt($("#dragElement").css('width')); 
var left = p[0].offsetLeft; 
var top = p[0].offsetTop; 
var width = parseInt(p.css("width"), 10)-dragWidth; 
var containment = [left, top, width+left, 1000]; 

हाँ, मैं जानता हूँ कि समाधान तरह का hackish है .. लेकिन वैसे भी, मैं सिर्फ अद्यतन JSFiddle यह समाधान गणना करने के लिए और गतिशील रूप से कंटेनर का आकार फिर से सेट नहीं हो सकता है। बस एक JSFiddle अच्छी तरह से काम करना चाहता था।

Answer 3

$("#dragElement") 
     .draggable({ 
      cursor  : "move", 
      containment : '#Container', 
      drag : function(event, ui) { 
       var growAmount = 10; 
       var cont = $('#Container'); 
       var item = $(ui.helper); 

       var itemOffset = item.offset(); 
       itemOffset.bottom = itemOffset.top + dProps.item.height(); 


       var contOffset= cont.offset(); 
       contOffset.bottom = contOffset.top + cont.height(); 

       if(itemOffset.bottom >= contOffset.bottom){ 
        var inst = item.draggable("instance"); 
        inst.containment = [inst.containment[0], inst.containment[1], inst.containment[2], inst.containment[3] + growAmount]; 
        cont.height(parseInt(cont.height()) + growAmount); 
       } 
      } 
     });