JQuery खींचने के बाहर माता-पिता

Question

मैं JQuery के ड्रैगगेबल() का उपयोग कर रहा हूं; ली तत्वों को खींचने योग्य बनाने के लिए। एकमात्र समस्या तब होती है जब तत्व अपने माता-पिता के बाहर खींचा जाता है, यह दिखाई नहीं देता है। यही है, यह अपने मूल div की सीमाओं को नहीं छोड़ता है। एक उदाहरण यहां है: http://imgur.com/N2N1L.png - ऐसा लगता है कि अन्य सभी चीज़ों के लिए जेड-इंडेक्स में अधिक प्राथमिकता है (और तत्व सबकुछ के नीचे स्लाइड करता है)।

$('.photoList li').draggable({ 
     distance: 20, 
     snap: theVoteBar, 
     revert: true, 
     containment: 'document' 
    }); 

और ली तत्वों इस तरह DIVs में रखा जाता है:

कोड यह

<div class="coda-slider preload" id="coda-slider-1"> 
    <div class="panel"> 
     <div class="panel-wrapper"> 
      <h2 class="title" style="display:none;">Page 1</h2> 
      <ul class="photoList"> 
       <li> 
        <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" /> 
       </li> 
      </ul> 
     </div> 
    </div> 

मैं सकारात्मक हूँ समस्या यह नहीं छोड़ देंगे है अपने अभिभावक कंटेनर, लेकिन मुझे यकीन नहीं है कि इसे बाहर निकालने के लिए क्या करना है।

किसी भी दिशा या मदद की सराहना की जाएगी!

Answer 1

यह एक सीएसएस मुद्दे की तरह दिखता है। रिवर्ट को बंद करने का प्रयास करें ताकि जब आप इसे आधे दृश्य में खींचें तो इसे तब तक रखा जाए जब यह आधा दिखाई दे। फिर फायरबग में जेड-इंडेक्स इत्यादि के साथ खेलें और देखें कि क्या आप इसे दिखा सकते हैं। यह माता-पिता उल या div के 'ओवरफ्लो: छुपा' के साथ एक सीएसएस मुद्दा हो सकता है।

Answer 2

मैं ने वही समस्या थी और विकल्प की स्थापना करके इसका समाधान नहीं:

appendTo: 'body' 

इसका एकमात्र पक्ष प्रभाव है अगर आप आइटम पर आधारित करने के लिए लागू शैलियों है पैरेंट कंटेनर है, उन शैलियों नहीं होगा सहायक पर उपस्थित रहें।

Answer 3

मैं इस पृष्ठ पर एक ही समस्या के साथ उतरा, और ब्रेंडन के जवाब ने मुझे करीब बंद कर दिया। appendTo विकल्प को सेट करने में मदद नहीं मिली, लेकिन मैं अपने ड्रैग करने योग्य तत्व के माता-पिता को overflow: visible जोड़ कर अपनी समस्या का समाधान करने में सक्षम था। बाहर निकलता है मैं श्रृंखला के कहीं से छिपी हुई विरासत में विरासत में था।

साइड नोट, ऐसा लगता है कि यह काम करता है क्योंकि jQuery UI ड्रैगगेबल तत्व को गतिशील रूप से माता-पिता के सापेक्ष स्थिति निर्धारण सेट करके ले जाता है - यह मेरे लिए नया इंटेल था!

Answer 4

मुझे भी यही समस्या थी। $ ('# Divmain')
सहायक:: - कार्रवाई
छोड़ने के लिए सीमा क्षेत्र को परिभाषित - दिखाई शो के लिए
के लिए 'क्लोन'

क्रमशः
आप इस विकल्प का

रोकथाम उपयोग कर सकते हैं घसीटा वस्तु भी बाहर div माता पिता लेकिन #divmain अंदर

उदाहरण

<div id="divmain"> 
    <div id="divparentdraggable"> 
    <div id="divdraggable"></div> 
    </div> 
    <div id="divparentdroppable"> 
    <div id="divdroppable"></div> 
    </div> 
</div> 

jQuery कोड:

$('divparentdraggable').draggable({ 
... 
containment: $('#divmain'), 
helper: 'clone', 
... 
}); 

मुझे आशा है कि इस मदद किसी को।

Answer 5

ऐसा लगता है कि उपरोक्त में से कुछ के संयोजन ने मेरे लिए यह किया था।

appendTo: 'body' और helper: 'clone' सेट करें। इस तरह एक नया डोम-ऑब्जेक्ट शरीर के बच्चे के रूप में बनाया जाएगा जो हर जगह दिखाई देगा। इस तरह आप इसे हर जगह अपनी जगह खींच सकते हैं (और छोड़ सकते हैं)।