HTML5 Drag'n'Drop एपीआई के साथ छंटनी

Sortable.js आधुनिक ब्राउज़रों और स्पर्श उपकरणों के लिए एक न्यूनतम पुस्तकालय है जिसमें jQuery की आवश्यकता नहीं होती है।

जैसा कि आप नाम से अनुमान लगा सकते हैं, लाइब्रेरी को drag'n'drop का उपयोग करके आइटम सॉर्ट करने के लिए डिज़ाइन किया गया है। ऐसे मामलों में मानक समाधान jQuery UI / Sortable है , जो न तो अधिक है और न ही 64 kb + 10 kb से कम है। कुल 75 kb एक परियोजना में gzipped है जहाँ jQuery का उपयोग बिल्कुल नहीं किया जाता है। अपेक्षाकृत हाल ही में Habré पर पहले से ही इसी तरह की कार्यक्षमता को लागू करने के बारे में एक लेख था, लेकिन फिर से प्रस्तावित समाधान में jQuery और स्पर्श उपकरणों का समर्थन नहीं किया गया है।

वजन के साथ समस्याओं के अलावा, मुझे मिली सभी लाइब्रेरी गतिशील रूप से बदलती सूची के साथ काम करने में सक्षम नहीं थीं। प्लगइन इनिशियलाइज़ेशन के समय, उन्होंने सभी तत्वों की स्थिति निर्धारित की, और उन्हें अपडेट करने के लिए, प्लगइन को फिर से संगठित करना या $('...').sortable('refresh') को सॉर्ट करना आवश्यक था $('...').sortable('refresh') विधि, जो बहुत असुविधाजनक है।

चूंकि मेरे कार्य को पुराने ब्राउज़रों के समर्थन की आवश्यकता नहीं थी, इसलिए मैंने HTML5 Drag'n'Drop का उपयोग करके शुद्ध जेएस में आवश्यक कार्यक्षमता बनाने की कोशिश करने का फैसला किया।

इस विषय पर लेख पढ़ने के बाद, यह पता चला है कि अब इस तरह के कार्यात्मक बनाना बहुत आसान है, आप 25 पंक्तियों को भी पूरा कर सकते हैं (यदि आप टिप्पणियों और बीट्स को हटाते हैं):

http://jsfiddle.net/RubaXa/zLq5J/

 function sortable(rootEl, onUpdate){ var dragEl; //     [].slice.call(rootEl.children).forEach(function (itemEl){ itemEl.draggable = true; }); //     function _onDragOver(evt){ evt.preventDefault(); evt.dataTransfer.dropEffect = 'move'; var target = evt.target; if( target && target !== dragEl && target.nodeName == 'LI' ){ //  rootEl.insertBefore(dragEl, target.nextSibling || target); } } //   function _onDragEnd(evt){ evt.preventDefault(); dragEl.classList.remove('ghost'); rootEl.removeEventListener('dragover', _onDragOver, false); rootEl.removeEventListener('dragend', _onDragEnd, false); //     onUpdate(dragEl); } //   rootEl.addEventListener('dragstart', function (evt){ dragEl = evt.target; //      //    evt.dataTransfer.effectAllowed = 'move'; evt.dataTransfer.setData('Text', dragEl.textContent); //     dnd rootEl.addEventListener('dragover', _onDragOver, false); rootEl.addEventListener('dragend', _onDragEnd, false); setTimeout(function (){ //      setTimeout,  //  ,    . dragEl.classList.add('ghost'); }, 0) }, false); } //  sortable( document.getElementById('list'), function (item){ console.log(item); }); 

जैसा कि आप कोड से देख सकते हैं, पूरी छँटाई में केवल rootEl.insertBefore(dragEl, target.nextSibling || target) का उपयोग करके rootEl.insertBefore(dragEl, target.nextSibling || target) , जहाँ target वह तत्व है जिसे rootEl.insertBefore(dragEl, target.nextSibling || target) । यदि आपने पहले ही उदाहरण का परीक्षण कर लिया है, तो संभवतः आपने देखा है कि आप किसी तत्व को पहली स्थिति में नहीं खींच सकते। विधि की एक और बारीकियों - onUpdate को हर बार कहा जाता है, भले ही आइटम को स्थानांतरित नहीं किया गया हो।

पहली समस्या से छुटकारा पाने के लिए, बस छंटाई के दौरान एक जांच जोड़ें। किसी तत्व target.nextSibling बाद target.nextSibling केवल इस सूची का पहला तत्व नहीं है।

http://jsfiddle.net/RubaXa/zLq5J/3/

 if( target && target !== dragEl && target.nodeName == 'LI' ){ //  rootEl.insertBefore(dragEl, rootEl.children[0] !== target && target.nextSibling || target); } 

इसके अलावा, बस nextEl = dragEl.nextSibling के समय अगले तत्व ( nextEl = dragEl.nextSibling ) के लिंक को सहेजने से आपको दूसरी समस्या (http://jsfiddle.net/RubaXa/zdq5J/4/29 और लाइन 38) से छुटकारा मिल सकता है।

पहली नज़र में, सब कुछ अच्छा लग रहा है, यह कॉम्पैक्ट और स्पष्ट कोड है जो अधिकांश ब्राउज़र का समर्थन करता है, और यदि आप attachEvent समर्थन जोड़ते हैं और dragEl.classList.add/remove हटा दें dragEl.classList.add/remove , कोड IE5.5 में भी काम करेगा:]

लेकिन, यदि हम उदाहरण को थोड़ा बदलते हैं, तो बस सूची की वस्तुओं की ऊंचाई बढ़ाते हुए, हमें तीसरी समस्या मिलती है। छंटनी सामान्य रूप से ऊपर से नीचे तक काम करती है, लेकिन इसके विपरीत - यह पहले से ही खराब है। इसलिए, तत्व के सम्मिलन, "पहले" या "बाद" को चुनने के तर्क को फिर से लिखने की आवश्यकता है ताकि यह ध्यान में रखे कि माउस कर्सर का आधा भाग "शीर्ष" या "नीचे" स्थित है। ऐसा करने के लिए, onDragOver पर हमें स्क्रीन के सापेक्ष तत्व के निर्देशांक मिलते हैं और जांचते हैं कि आधा कर्सर कौन सा है:

http://jsfiddle.net/RubaXa/zLq5J/6/

 var rect = target.getBoundingClientRect(); var next = (evt.clientY - rect.top)/(rect.bottom - rect.top) > .5; rootEl.insertBefore(dragEl, next && target.nextSibling || target); 

इसके अलावा, मुझे इनलाइन तत्वों और फ्लोट ब्लॉकों के साथ काम को भी परिष्कृत करना पड़ा।

स्पर्श समर्थन

काश, drag'n'drop स्पर्श उपकरणों पर काम नहीं करता है, तो किसी तरह हम स्पर्श घटनाओं के आधार पर अनुकरण करना था। मैंने लंबे समय तक अपने दिमाग को रैक किया, दस्तावेज़ीकरण पढ़ा, लेकिन जवाब नहीं मिला। नतीजतन, थोड़ी सी खुदाई के बाद, मुझे अद्भुत दस्तावेज याद आया ।elementFromPoint विधि , जो आपको निर्देशांक द्वारा एक तत्व का लिंक प्राप्त करने की अनुमति देता है।

नतीजतन, touchstart मैं एक तत्व को क्लोन करता हूं जो मेरी उंगली के नीचे एक "भूत" के रूप में काम करेगा और इसे touchmove पर translate3d का उपयोग touchmove ले जाएगा:

 var touch = evt.touches[0] , dx = touch.clientX - tapEvt.clientX , dy = touch.clientY - tapEvt.clientY ; 

इसके अलावा, मैं setInterval चलाता हूं, जिसमें प्रत्येक 100ms मैं उस तत्व की जांच करता हूं, जिस पर मेरी उंगली वर्तमान में है:

 _emulateDragOver: function (){ if( touchEvt ){ //  “”   _css(ghostEl, 'display', 'none'); //  ,     var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY); //        rootEl, //   onDragOver: this._onDragOver({ target: target , clientX: touchEvt.clientX , clientY: touchEvt.clientY }); //   “” _css(ghostEl, 'display', ''); } } 

जैसा कि आप देख रहे हैं, यह सब कुछ अलौकिक नहीं है। हम कोड बनाते हैं, थोड़ा दस्तावेज लिखते हैं और माइक्रो लाइब्रेरी तैयार होती है।

क्रमित करने योग्य

पुस्तकालय 2 kb का हो गया और निम्नलिखित विशेषताएं हैं:

• ऊर्ध्वाधर और क्षैतिज सूचियों को क्रमबद्ध करें;
• छंटाई (सीएसएस-चयनकर्ता) के लिए आइटम सेट करने की क्षमता;
• समूहन;
• संभाल निर्दिष्ट करने की क्षमता (एक तत्व जिसके लिए आप खींच सकते हैं);
• जिस वर्ग को आइटम में जोड़ा जाता है उसे स्थानांतरित किया जाता है;
• घटनाएँ onAdd, onUpdate, onRemove;
• गतिशील रूप से बदलती सूची के साथ काम करें।

कोड उदाहरण:

 //  ,  ul > li var list = document.getElementById("my-ui-list"); new Sortable(list); //  . //  var foo = document.getElementById("foo"); new Sortable(foo, { group: "omega" }); var bar = document.getElementById("bar"); new Sortable(bar, { group: "omega" }); // handle + event var container = document.getElementById("multi"); new Sortable(container, { handle: ".tile__title", // css-,     dragabble: ".tile", // css- ,    onUpdate: function (evt/**Event*/){ var item = evt.detail; //   ,   } }); 

फिलहाल, केवल बुनियादी कार्यक्षमता है, मुझे किसी भी प्रतिक्रिया या पुल अनुरोध पर खुशी होगी, आपके ध्यान के लिए धन्यवाद।


डेमो | स्रोत

आप हमारी परियोजनाओं का भी अनुसरण कर सकते हैं:

github.com/mailru - FileAPI, टारनटूल, उत्सव और बहुत कुछ
github.com/rubaxa - मेरा जीथूब
@ibnRubaXa