jquery ui sortable issue के साथ jquery slim scroll

Question

हाय मेरे पास एक ऐसी स्थिति है जहां मैं jquery स्लिम स्क्रॉल प्लगइनjquery sortable के साथ उपयोग कर रहा हूं। समस्या तब होती है जब मैं वस्तुओं को एक सूची आइटम से खींचता हूं, दाईं ओर स्क्रॉल बार के साथ आगे बढ़ता नहीं है, इसलिए यदि मुझे सूची को अंतिम सूची आइटम क्षेत्र में छोड़ना है, तो मैं वहां नहीं जा सकता जब तक कि मैं mousewheel का उपयोग नहीं करता। तो मैं स्क्रॉलबार स्थिति को कैसे बांध सकता हूं क्योंकि मैं आइटम को एक सूची क्षेत्र से दूसरे में खींचता हूं। नीचे code-

$(function() { 
 
    $("ul.droptrue").sortable({ 
 

 
    revert: 'invalid', 
 
    connectWith: "ul" 
 
    }); 
 

 

 
    $("#sortable1, #sortable2, #sortable3").disableSelection(); 
 

 

 
    $('.ScrollableAreanew ').slimScroll({ 
 
    height: '400', 
 
    width: '100%', 
 
    alwaysVisible: true, 
 
    color: 'rgb(15,170,255)', 
 
    railOpacity: 1, 
 
    opacity: 1, 
 
    size: '5px', 
 
    position: 'right', 
 
    allowPageScroll: false, 
 

 

 
    }); 
 
});

#sortable1, 
 
#sortable2, 
 
#sortable3 { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    float: left; 
 
    margin-right: 10px; 
 
    background: #eee; 
 
    padding: 5px; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
} 
 
#sortable1 li, 
 
#sortable2 li, 
 
#sortable3 li { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    width: 100%; 
 
    border: 1px solid #000; 
 
    margin-bottom: 5px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script> 
 
<div class="ScrollableAreanew"> 
 
    <ul id="sortable1" class="droptrue"> 
 
    <li class="ui-state-default">Can be dropped..</li> 
 
    <li class="ui-state-default">..on an empty list</li> 
 
    <li class="ui-state-default">Item 3</li> 
 
    <li class="ui-state-default">Item 4</li> 
 
    <li class="ui-state-default">Item 5</li> 
 
    </ul> 
 
    <ul id="sortable2" class="droptrue"> 
 
    <li class="ui-state-highlight">Cannot be dropped..</li> 
 
    <li class="ui-state-highlight">..on an empty list</li> 
 
    <li class="ui-state-highlight">Item 3</li> 
 
    <li class="ui-state-highlight">Item 4</li> 
 
    <li class="ui-state-highlight">Item 5</li> 
 
    </ul> 
 
    <ul id="sortable3" class="droptrue"> 
 
    <li class="ui-state-highlight">Cannot be dropped..</li> 
 
    <li class="ui-state-highlight">..on an empty list</li> 
 
    <li class="ui-state-highlight">Item 3</li> 
 
    <li class="ui-state-highlight">Item 4</li> 
 
    <li class="ui-state-highlight">Item 5</li> 
 
    </ul> 
 
</div>

Answer 1

यहाँ हम क्या करने की जरूरत

1. है माउस की स्थिति को प्राप्त करें - वाई समन्वय के रूप में हम .ScrollableAreanew
2. अंदर ले जाने के जब भी कोई sortable आइटम स्थानांतरित हो गया है (sort ईवेंट का उपयोग करें), scrollTo का उपयोग करके स्क्रॉलस्क्रॉल को स्क्रॉल किए गए स्थान पर ले जाएं।

sort ईवेंट सॉर्टिंग के दौरान ट्रिगर किया गया है। अधिक जानकारी के

$(function() { 
 
    var currentMousePos = { x: -1, y: -1 }; 
 
    $(document).mousemove(function(event) { 
 
     currentMousePos.x = event.pageX; 
 
     currentMousePos.y = event.pageY; // Get position of mouse - Y coordinate 
 
    }); 
 
    
 
    $("ul.droptrue").sortable({ 
 
    sort : function(event, ui) { // This event is triggered during sorting. 
 
    var scrollTo_int = currentMousePos.y + 'px'; 
 
    $(".ScrollableAreanew").slimScroll({ 
 
    scrollTo : scrollTo_int, // scroll to mouse position 
 
    height: '400', 
 
    width: '100%', 
 
    alwaysVisible: true, 
 
    color: 'rgb(15,170,255)', 
 
    railOpacity: 1, 
 
    opacity: 1, 
 
    size: '5px', 
 
    position: 'right', 
 
    allowPageScroll: false 
 
    }); 
 
    }, 
 
    revert: 'invalid', 
 
    connectWith: "ul" 
 
    }); 
 

 
    $("#sortable1, #sortable2, #sortable3").disableSelection(); 
 

 
    $('.ScrollableAreanew ').slimScroll({ 
 
    height: '400', 
 
    width: '100%', 
 
    alwaysVisible: true, 
 
    color: 'rgb(15,170,255)', 
 
    railOpacity: 1, 
 
    opacity: 1, 
 
    size: '5px', 
 
    position: 'right', 
 
    allowPageScroll: false 
 
    }); 
 
});

#sortable1, 
 
#sortable2, 
 
#sortable3 { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    float: left; 
 
    margin-right: 10px; 
 
    background: #eee; 
 
    padding: 5px; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
} 
 
#sortable1 li, 
 
#sortable2 li, 
 
#sortable3 li { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    width: 100%; 
 
    border: 1px solid #000; 
 
    margin-bottom: 5px; 
 
} 
 

 
.justAddingHeight 
 
{ 
 
    height:100px !important; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script> 
 
<div class="justAddingHeight"></div> 
 
<div class="ScrollableAreanew"> 
 
    <ul id="sortable1" class="droptrue droppable"> 
 
    <li class="ui-state-default draggable">Can be dropped..</li> 
 
    <li class="ui-state-default draggable">..on an empty list</li> 
 
    <li class="ui-state-default draggable">Item 3</li> 
 
    <li class="ui-state-default draggable">Item 4</li> 
 
    <li class="ui-state-default draggable">Item 5</li> 
 
    </ul> 
 
    <ul id="sortable2" class="droptrue droppable"> 
 
    <li class="ui-state-highlight draggable">Cannot be dropped..</li> 
 
    <li class="ui-state-highlight draggable">..on an empty list</li> 
 
    <li class="ui-state-highlight draggable">Item 3</li> 
 
    <li class="ui-state-highlight draggable">Item 4</li> 
 
    <li class="ui-state-highlight draggable">Item 5</li> 
 
    </ul> 
 
    <ul id="sortable3" class="droptrue droppable"> 
 
    <li class="ui-state-highlight draggable">Cannot be dropped..</li> 
 
    <li class="ui-state-highlight draggable">..on an empty list</li> 
 
    <li class="ui-state-highlight draggable">Item 3</li> 
 
    <li class="ui-state-highlight draggable">Item 4</li> 
 
    <li class="ui-state-highlight draggable">Item 5</li> 
 
    </ul> 
 
</div>

संपादित

इसके बजाय .ScrollableAreanew div अंदर माउस स्थिति होने का
1. के लिए here देखें, document में माउस की स्थिति को मिलता है।

नोट: वर्ग justAddingHeight (होने 100px की ऊंचाई) एक POC के रूप में साथ जोड़ा गया div।

आशा है कि यह आपकी समस्या हल करे।