jQuery UI आकार बदलने वाले तत्वों का आकार बदलता है, न कि आकार वाले तत्व

मुझे jQuery UI आकार बदलने योग्य तत्वों के लिए कस्टम हैंडल की आवश्यकता है जो इस तत्व के बच्चे नहीं हैं। मैंने इसे jQuery UI documentation page पर दस्तावेज करने का प्रयास करने की कोशिश की लेकिन मैं इसे काम पर नहीं ला सकता हूं और क्यों विचारों से बाहर निकल रहा हूं।jQuery UI आकार बदलने वाले तत्वों का आकार बदलता है, न कि आकार वाले तत्व

यह मेरा उदाहरण सेटअप (काम नहीं कर रहा है):

एचटीएमएल

<div id="wrapper"> 
    <div id="resize-me"></div> 
</div> 

<div class="ui-resizable-handle ui-resizable-n" id="n-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-e" id="e-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-s" id="s-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-w" id="w-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-ne" id="ne-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-se" id="se-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-sw" id="sw-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-nw" id="nw-resize-handle"></div>

जे एस

$('#resize-me').resizable({ 
    handles: { 
    n: $('#n-resize-handle'), 
    e: $('#e-resize-handle'), 
    s: $('#s-resize-handle'), 
    w: $('#w-resize-handle'), 
    ne: $('#ne-resize-handle'), 
    se: $('#se-resize-handle'), 
    sw: $('#sw-resize-handle'), 
    nw: $('#nw-resize-handle') 
    } 
});

मैं codepen.io

पर इस समस्या का डेमो तैयार

मैंने इस तरह के कुछ को कार्यान्वित करने के उदाहरणों के लिए पूरे नेट पर खोज की। शायद यहां किसी ने ऐसा किया है और यह बता सकता है कि मैं क्या खो रहा हूं?

मैंने पहले से ही this SO question देखा है, लेकिन मुझे लगता है कि यह एक डुप्लिकेट नहीं है क्योंकि इसका उत्तर उत्पादन कोड के अनुसार व्यवहार्य नहीं है, जैसा कि उत्तर के लेखक ने कहा है।

किसी भी मदद की सराहना की जाएगी।

स्रोत

2013-08-06 Arek

अपने सभी हैंडलर को रैपर के अंदर ले जाएं। वे वहां हैं लेकिन जैसे ही वे पूर्ण स्थान पर हैं ताकि आप उन्हें नहीं देख सकें। उन्हें ऊंचाई या चौड़ाई और कुछ सीमा-रंग या पृष्ठभूमि इत्यादि भी दें। Http://codebu.io/aamirafridi/pen/zKInJ –

जैसे कुछ http://sbueno.noahstokes.com/post/426818005/jquery- ui-resizable-custom-handle-syntax आपके हैंडलर को आकार बदलने योग्य तत्व के अंदर होना चाहिए। इस तरह http://codepen.io/aamirafridi/pen/zKInJ –

मुझे पता है कि जब वे रैपर के अंदर होते हैं तो उन्हें काम करने के लिए कैसे प्राप्त करें। मुझे स्पष्ट रूप से उन्हें इसके बाहर होने की आवश्यकता थी। वैसे भी आपके सुझावों के लिए धन्यवाद। – Arek

वह उत्तर नहीं जिसे आप उम्मीद कर रहे थे, लेकिन - यह jQuery UI के साथ एक खुला (अनसुलझा) बग है। http://bugs.jqueryui.com/ticket/9658

अद्यतन: इस बग jQueryUI 1.11.4, जो मार्च 2015

स्रोत

2014-06-13 04:54:12

मुझे लगता है, दुर्भाग्य से, यह इस सवाल का जवाब है। इस मुद्दे के बारे में जानकारी ढूंढने वाले किसी के लिए मैं इसे स्वीकार कर दूंगा। धन्यवाद! – Arek

में जारी किया गया था आप इस समाधान का प्रयास कर सकते हैं में तय हुई थी। मैं div resize-me में dinamically divs डालें।

एचटीएमएल

<div id="wrapper"> 
    <div id="resize-me"></div> 
</div> 
<div id="divHandles"> 
    <div class="ui-resizable-handle ui-resizable-n" id="n-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-e" id="e-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-s" id="s-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-w" id="w-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-ne" id="ne-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-se" id="se-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-sw" id="sw-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-nw" id="nw-resize-handle"></div> 
</div>

जे एस $ (document) .ready (function() { appliResize ("# आकार-मुझे"); });

function appliResize(elementName){ 
     $.each($("#divHandles").find(".ui-resizable-handle"), function (index, value){ 
      $(elementName).append($(value).clone().attr('id',$(value).attr('id')+elementName.slice(1))); 
    }); 
    $('#resize-me').resizable({ 
     handles: { 
      n: '#n-resize-handle'+elementName.slice(1), 
      e: '#e-resize-handle'+elementName.slice(1), 
      s: '#s-resize-handle'+elementName.slice(1), 
      w: '#w-resize-handle'+elementName.slice(1), 
      ne: '#ne-resize-handle'+elementName.slice(1), 
      se: '#se-resize-handle'+elementName.slice(1), 
      sw: '#sw-resize-handle'+elementName.slice(1), 
      nw: '#nw-resize-handle'+elementName.slice(1) 
     } 
    }); 
}

स्रोत

2014-06-17 14:42:11

jQuery UI आकार बदलने वाले तत्वों का आकार बदलता है, न कि आकार वाले तत्व

उत्तर

संबंधित मुद्दे