jQuery खींचने योग्य स्क्रॉल करने योग्य कंटेनर

Question

वर्तमान में मेरे पास एक साधारण ड्रैगगेबल सूची है, जिसे मैं एक div (आइटम्स) और स्क्रॉल करने योग्य के अंदर होना चाहता हूं।

$(".draggable").draggable(); 

मैं इस समय इस बेला है: http://jsfiddle.net/YvJhE/660/

लेकिन जैसा कि आप देख सकते हैं, खींचने योग्य तत्वों, तत्वों कंटेनर के अंदर रहना मैं उन्हें बाहर खींच करने में सक्षम होना चाहता हूँ, लेकिन यह भी अंदर स्क्रॉल करने की क्षमता जितनी जल्दी हो सके कंटेनर तत्व कंटेनर की तुलना में अधिक तत्व हैं।

क्या कोई मुझे सही रास्ते पर ले जा सकता है?

Answer 1

वास्तव में यह एक अच्छा सवाल है, क्योंकि यह पता चलता है कि JQuery कैसे खींचने योग्य तत्वों को संभालता है। आपके ड्रैग करने योग्य तत्वों को मूल "तत्व" div के बाहर खींचा नहीं जा सकता है, क्योंकि यह उनके लिए प्रतिबंध के प्रति दर्शाता है।

तो आप मूल तत्व "तत्व" का उपयोग करने के लिए त्याग कर सकते हैं, फिर आप उन्हें कहीं भी खींच सकते हैं।

या आप 100% के साथ चौड़ाई और ऊंचाई का उपयोग करके पैरेंट तत्व को बड़ा बना सकते हैं।

यदि आप बूटस्ट्रैप कंटेनर के अंदर ड्रैगगेबल का उपयोग करते हैं तो आप देखेंगे कि उन्हें कंटेनर की सीमा तक खींच लिया जा सकता है, लेकिन कभी भी इसके बाहर कभी नहीं।

आप एक पूर्ण स्थिति के साथ, मूल तत्व के बाहर खींचने योग्य तत्वों को रखने का भी प्रयास कर सकते हैं।

सीएसएस:

.draggable{ 
    width: 60px; 
    z-index: 15; 
    margin: 0 auto; 
    position: absolute; 
} 

#elements{ 
     overflow: scroll; 
     position:absolute; 
     left:20px; 
     width:100%; 
     height:100%; 
     background:#fff; 
     border:1px solid #000; 
     z-index:5; 
     padding:10px; 
     font-size: 10px; 
} 

एचटीएमएल:

<div id="elements"/> 

<div id="" class="draggable ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

Answer 2

jQuery एक सहायक उद्देश्य यह है कि यदि आप किसी अन्य डोम तत्व को संलग्न कर सकते हैं के साथ इस तरह की बातचीत को संभालती है:

$(".draggable").draggable({ 
    helper: 'clone', 
    appendTo: '#outer' 
}); 

तो फिर तुम कर सकते हैं कहीं छोड़ने योग्य है:

अवधारणा के

$('#dropspace').droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     window.alert('Element dropped at left: ' + ui.position.left + '; top: ' + ui.position.top); 
    } 
}); 

सबूत: http://jsfiddle.net/YvJhE/662/

आप अभी भी करने के लिए जहां यह हटा दिया गया था वास्तविक डोम तत्व ले जाते हैं, या आप के लिए इसका इस्तेमाल करने के लिए जा रहे हैं, उसके आधार पर फिर से बनाना होगा।

Answer 3

विकल्प helper: 'clone' आइटम आप स्वचालित रूप से खींच रहे हैं, ताकि यह कंटेनर से बाहर खींचा जा सकता है का क्लोन बना देता है:

jQuery(".draggable").draggable({ 
    helper: 'clone', 
    revert: 'invalid', 
    appendTo: 'body' 
});