😠 😊 🤣 वैकल्पिक .sortable - नई jQuery सूची सॉर्टिंग समाधान 👲🏼 🤶🏼 🧥

छँटाई सूचियों के लिए कई समाधान हैं, उदाहरण के लिए, नेस्टेबल, सॉर्ट करने योग्य, टेबलडीडीट, टेबलसोर्टर, और अन्य जिनकी व्यापक कार्यक्षमता है, लेकिन एक ही समय में - महान कोड।
मेरा समाधान jQuery का उपयोग करता है, इसमें एक कॉम्पैक्ट कोड (टिप्पणियों के बिना 52 लाइनें, 1.8 केबी) है और ऊर्ध्वाधर अक्ष के साथ मूल कंटेनर के भीतर तत्वों (अपेक्षाकृत तैनात) को मिश्रण करना शामिल है।
विचार की पूरी ट्रेन को जावास्क्रिप्ट में टिप्पणी की गई है।

JsFiddle ( असंगत कोड) पर कार्रवाई देखें ।

HTML मार्कअप

<!DOCTYPE html> <html><head> <meta charset='utf-8'> <link type='text/css' rel='stylesheet' href='style.css'> <script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.min.js'></script> <script type='text/javascript' src='actions.js'></script> </head><body> <div id="container"> <div class="drag">1</div> <div class="drag">2</div> <div class="drag">3</div> <div class="drag">4</div> <div class="drag">5</div> </div> </body></html>

style.css

 #container {position:absolute; width:500px; top:100px;} .drag {position:relative; cursor:default; z-index:1;}

actions.js

 $(document).ready(function(){ $.fn.draggable = function(){ //     function disableSelection(){ return false; } //    $(this).mousedown(function(e){ var drag = $(this); //    var posParentTop = drag.parent().offset().top; //    var posParentBottom = posParentTop + drag.parent().height(); //     var posOld = drag.offset().top; //       var posOldCorrection = e.pageY - posOld; //     z- drag.css({'z-index':2, 'background-color':'#eeeeee'}); //   var mouseMove = function(e){ //      var posNew = e.pageY - posOldCorrection; //        if (posNew < posParentTop){ //   ,    drag.offset({'top': posParentTop}); //      DOM,   ( )  //    ,   if (drag.prev().length > 0 ) { drag.insertBefore(drag.prev().css({'top':-drag.height()}).animate({'top':0}, 100)); } //        } else if ((posNew + drag.height()) > posParentBottom){ //   ,    +   -   drag.offset({'top': posParentBottom - drag.height()}); //      DOM,   ( )  //    ,   if (drag.next().length > 0 ) { drag.insertAfter(drag.next().css({'top':drag.height()}).animate({'top':0}, 100)); } //      } else { //    (   ) drag.offset({'top': posNew}); //        if (posOld - posNew > drag.height() - 1){ //      DOM drag.insertBefore(drag.prev().css({'top':-drag.height()}).animate({'top':0}, 100)); //   drag.css({'top':0}); //        posOld = drag.offset().top; posNew = e.pageY - posOldCorrection; posOldCorrection = e.pageY - posOld; //        } else if (posNew - posOld > drag.height() - 1){ //      DOM drag.insertAfter(drag.next().css({'top':drag.height()}).animate({'top':0}, 100)); drag.css({'top':0}); posOld = drag.offset().top; posNew = e.pageY - posOldCorrection; posOldCorrection = e.pageY - posOld; } } }; //    var mouseUp = function(){ //    $(document).off('mousemove', mouseMove).off('mouseup', mouseUp); //      $(document).off('mousedown', disableSelection); //         drag.animate({'top':0}, 100, function(){ //  z-     drag.css({'z-index':1, 'background-color':'transparent'}); }); //      // (cookie  post-  ,    ) }; //         //   ,      $(document).on('mousemove', mouseMove).on('mouseup', mouseUp).on('contextmenu', mouseUp); //      $(document).on('mousedown', disableSelection); //  ,     (,    ) $(window).on('blur', mouseUp); }); } $('.drag').draggable(); });

कोड (यहां और jsFiddle पर) खोजे गए दोषों के सुधार के परिणामस्वरूप अपडेट किया जाएगा, जिसे मैं टिप्पणियों में सूचित करूंगा।
अनारक्षित मुद्दे: अपने मूल कंटेनर की सीमाओं से परे इसे जल्दी से खींचते समय एक तत्व को मरोड़ते हुए।

वैकल्पिक .sortable - नई jQuery सूची सॉर्टिंग समाधान

More articles: