jQuery ड्रैगगेबल + सॉर्ट करने योग्य - दो स्क्रॉल करने योग्य सूचियों के बीच खींचें और छोड़ें

Question

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

 <script type="text/javascript"> 
     $(function() { 
      $("#available > li").draggable({ 
       revert: 'invalid', 
       connectToSortable: '#selected', 
       containment: '#drag_container' 
      }); 

      $("#selected").sortable({ 
       axis: 'y', 
       placeholder: 'ui-state-highlight' 
      }); 
     }); 
    </script> 

और इसी एचटीएमएल:

यहाँ मैं अब तक है jQuery है

  <div class="drag_container"> 
      <ul id="available" class="drag_column draggable"> 
       <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li> 
       <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 2</li> 
       <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 3</li> 
       <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 4</li> 
       <li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 5</li> 
       <li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 6</li> 
       <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li> 
       <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li> 
      </ul> 


      <ul id="selected" class="drag_column draggable sortable" style="margin-left: 20px;"> 
       <li id="item7" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 7</li> 
       <li id="item8" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 8</li> 
       <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li> 
       <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li> 
       <li id="item11" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 11</li> 
       <li id="item12" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 12</li> 
       <li id="item13" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 13</li> 
       <li id="item14" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 14</li> 
       <li id="item15" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 15</li> 
       <li id="item16" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 16</li> 
       <li id="item17" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 17</li> 
       <li id="item18" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 18</li> 
      </ul> 
      <div style="clear: both">&nbsp;</div> 
     </div> 

स्क्रॉल करने योग्य सूची आवश्यकता के साथ

, तथापि, मैं खींचने योग्य व्यवहार काम करने के लिए नहीं मिल सकता है खूबसूरती से (http://pastehtml.com/view/1bsk6bt.html पर डेमो देखें)।

एक बार आइटम को खींचने के बाद उपलब्ध आइटम सूची में प्रवेश करने के बाद, यह स्क्रॉल करने योग्य फ्रेम के पीछे गायब हो जाता है। मैंने क्लोन हेल्पर की कोशिश की है, और डीवी, अलग ओवरफ्लो विकल्प, jQuery में स्क्रॉल विकल्प को बंद करने के साथ-साथ खेलने के लिए भी कोशिश की है, लेकिन इसे ठीक से काम करने के लिए नहीं मिल सकता है। मुझे यकीन है कि वहां से किसी ने कुछ ऐसा किया है जो मैं यहां करना चाहता हूं और मुझे कुछ समय बचा सकता है? :)

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

Answer 1

Whew! यह ठीक करने के लिए एक मजेदार था।

पहली समस्या, सूची क्षैतिज रूप से स्क्रॉलिंग के साथ, मैंने आपके सीएसएस में कुछ सरल अतिप्रवाह परिवर्तनों के साथ तय किया। मैंने आपके .drag_column से दोनों अतिप्रवाह गुणों को हटा दिया है, और एक अतिप्रवाह डाल दिया है: .drag_container में छिपा हुआ है।

.drag_container { 
    width: 1000px; 
    margin: 0 auto; 
    position: relative; 
    border: 1px solid black; 
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
} 

.drag_column { 
    padding: 5px; 
    width: 490px; 
    height: 200px; 
    float: left; 
    position: relative; 
} 

दुर्भाग्य से, जब मुझे लगता है कि यह एक ऐसी स्थिति त्रुटि बनाए जाने पर जब आप एक सूची से अपने खींचने योग्य ले जाया गया था (यह ऊपर की ओर गोली मार होगा, जो सूची आइटम आपके द्वारा चुने गए के आधार पर)। इसे ठीक करने के लिए, मैंने आपके ड्रैगगेबल निर्माण फ़ंक्शन में "सहायक: क्लोन" पंक्ति जोड़ा।

$("#available > li").draggable({ 
    revert: 'invalid', 
    connectToSortable: '#selected', 
    containment: '#drag_container', 
    helper: 'clone' 
}); 

एक बार फिर, यह एक अवांछनीय प्रभाव पैदा हुआ। क्लोन हेल्पर इसे बनाता है इसलिए मूल सूची में आइटम कभी नहीं हटाए जाते हैं। इसे ठीक करने के लिए, मुझे मैन्युअल रूप से एक ऐसा फ़ंक्शन बनाना था जो पुराने आइटम को हटा देगा। मैंने जो किया वह मैंने एक शुरुआत जोड़ा: आपके ड्रैगगेबल ऑब्जेक्ट पर फ़ंक्शन, जिसने ऑब्जेक्ट आईडी पकड़ ली और इसे एक चर में रखा। फिर मैंने आपकी # चयनित सूची का एक ड्रॉपपॉबल ऑब्जेक्ट बनाया, और एक ड्रॉप बनाया: वहां कार्य करें। वह ड्रॉप फ़ंक्शन बस मिलान आईडी के साथ ऑब्जेक्ट पर एक स्लाइडअप (100) करता है। ध्यान दें कि मेरे पास स्क्रिप्ट की शुरुआत में एक परिवर्तनीय निर्माण है - यह आईई में एक बग को हल करता है।

var dragged = null; 
$(function() { 
    $("#available > li").draggable({ 
     revert: 'invalid', 
     connectToSortable: '#selected', 
     containment: '#drag_container', 
     helper: 'clone', 
     start: function(ui, event) { 
      dragged = $(this).attr('id'); 
     } 
    }); 
    $("#selected").droppable({ 
     drop: function(event, ui) { 
      var ident = "#" + dragged; 
      $(ident).slideUp(100); 
     } 
    }); 

मैं तो आप के आसपास खेल सकते हैं अगर आप चाहते हैं http://pastehtml.com/view/1by9nfd.html पर पूर्ण HTML के साथ एक पृष्ठ पोस्ट किया। उम्मीद है की यह मदद करेगा!

Answer 2

मैं इस कार्यक्षमता की जरूरत है और इस

उपयोग appendTo करने के लिए एक रास्ता मिल गया था: "शरीर" और स्थिति सेट प्रारंभ पर पूर्ण। खींचा जा रहा तत्व शरीर में जोड़ा जाता है और अन्य तत्वों के "शीर्ष" alwayz है क्योंकि इसकी स्थिति शरीर के लिए absloute है।

$("#available > li").draggable({ 

    revert: 'invalid', 
    appendTo: 'body', 
    helper: 'clone', 
    connectToSortable: '#selected', 
    containment: '#drag_container', 

start: function(event, ui){ 

    $(ui.helper).css('position', 'absolute'); //helper if you are using clone 

}, 


stop: function(event, ui){ 

    $(ui.helper).css('position', 'relative'); // if you want 

} 

}); 

आशा इस