मेटर

Question

में क्रमबद्ध सूची खींचें और छोड़ें 0 आप इसे कैसे बनाएंगे?

सूची में आइटम संग्रह में रिकॉर्ड के अनुरूप हो सकते हैं, और सूची में उनकी स्थिति प्रत्येक रिकॉर्ड ("रैंक" शायद) पर एक फ़ील्ड के अनुरूप हो सकती है जिसे 'स्टॉप' घटना होने पर अपडेट किया जाना होगा ।

क्या उल्का jQueryUI सॉर्ट करने योग्य के साथ अच्छी तरह से खेलेंगे? क्या होगा यदि एकाधिक उपयोगकर्ताओं ने एक ही सूची को एक ही सूची में खींचने और क्रमबद्ध करने का प्रयास किया? क्या उल्का को एक अनुकूलित सॉर्टिंग व्यवहार की आवश्यकता होगी?

Answer 1

संपादित करें: नीचे दिया गया उत्तर पुराना है, @ cutemachine का उत्तर या http://blog.differential.com/sortable-lists-in-meteor-using-jquery-ui कला की स्थिति के बहुत करीब है।

---

संक्षिप्त उत्तर यह है कि यदि आप इसे प्रतिक्रियाशील बनाना चाहते हैं तो यह आसान नहीं है। एक गैर प्रतिक्रियाशील संस्करण बनाने के लिए, बस अपने टेम्पलेट को {{#constant}} टैग में लपेटें और jquery-ui सॉर्ट करने योग्य render में @bento सुझाए गए अनुसार।

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

1. दुर्भाग्य से, यह नहीं हो रहा है यह चेतन है, जो गरीब UX के लिए नेतृत्व करने जा रहा है बनाने के लिए आसान हो सकता है: यहाँ के बारे में कैसे आप इसके बारे में जाना होगा कुछ विचार कर रहे हैं। आइए अब इसके लिए छोड़ दें।

2. की तरह कुछ के साथ आइटम प्रस्तुत: {{#each items}} {{> item}} {{/item}}

   यह पुन: आदेश में ही जब डेटा सर्वर (एनीमेशन के बिना) से नीचे आता है।

3. प्रत्येक आइटम को प्रस्तुत करने पर खींचने योग्य होने के लिए सेट अप करें। आप या तो

   i। Jquery-ui draggable जैसे कुछ का उपयोग करें, और इसे render में item टेम्पलेट पर हुक करें। यदि आप अपस्ट्रीम से ऑर्डरिंग बदलते हैं तो आपको ड्रैग के दौरान अंतर्निहित तत्व गायब हो सकता है क्योंकि आपको ऐसा करने में समस्या हो सकती है।

   ii। निचले स्तर की लाइब्रेरी का उपयोग करके, अपने स्वयं के ड्रैगिंग कोड को लागू करें।

4. जब कोई आइटम स्थिति में खींचा जाता है, तुरंत स्थानीय रूप से सूची को पुन: क्रमबद्ध करें (इस तरह उपयोगकर्ता को सही चीज़ देखना चाहिए। उम्मीद है कि सर्वर परिवर्तन का सम्मान करेगा .. लेकिन चलो इसमें शामिल न हों)।

मुझे लगता है कि इस तरह के विजेट के लिए एक उल्कात्मक तरीके से किया गया है। यह मेरे व्यक्तिगत रडार पर है (लेकिन एनीमेशन के साथ फिर से ऑर्डर करने का एक अच्छा तरीका सहित कई चीजें हैं)।

Answer 2

मैं jQuery UI sortable और Meteor Collection Hooks और contentEditable का उपयोग करके ड्रैग और ड्रॉप, क्रमबद्ध और संपादन योग्य सूची को लागू करने में कामयाब रहा। आंशिक रूप से काम करने वाले उदाहरण के लिए, this demo देखें।

मेरे कार्यान्वयन इस प्रकार है (दुर्भाग्य से उस में एक साधारण प्लग हो जाएगा नहीं और उदाहरण जाना, लेकिन मैं एक डेमो ऊपर है और जल्द ही इस विशिष्ट उदाहरण के लिए चलाने के लिए आशा):

ग्राहक जे एस खींचें के लिए, ड्रॉप और बचाने:

Template.templateName.rendered = -> 
    Deps.autorun -> 
    $('#list').sortable 
     handle: '.handle' 
     stop: (event, ui) -> 
     _.each $(event.target).children('div'), (element, index, list) -> 
      Elements.update { _id: element.getAttribute('data-element-id') }, 
      $set: position: index + 1 

कुछ बातें यहाँ सूचना के लिए, मैं एक 'हैंडल' का उपयोग कर रहा तत्व के चारों ओर खींचें करने के लिए, अंदर के रूप में प्रत्येक div अन्य बटन और संपादन योग्य सामग्री देखते हैं। एक बार उपयोगकर्ता ने एक तत्व खींच लिया है और उसे जगह में गिरा दिया है, तो 'स्टॉप' ईवेंट बंद हो जाता है और मैं नई स्थिति के साथ उस सूची में प्रत्येक तत्व अपडेट करता हूं।

मेरे पास पृष्ठ पर तत्व जोड़ने की क्षमता भी है, जो सूची के नीचे स्थित होगी। अन्यथा आप शायद Meteor Collection Behaviours और/या Mongo Counter पैकेज का उपयोग कर दूर हो सकते हैं। हुक

@Elements.before.insert (userId, doc) -> 
    highestElement = Elements.findOne({}, 
        sort: { position: -1 } 
        limit: 1 
        ) 
    position = if highestElement? then highestElement.position else 0 
    doc.position = position + 1 

यहाँ हम केवल उच्चतम दस्तावेज़ हो रही है इससे पहले कि

संग्रह, स्थिति विशेषता पर छँटाई: हालांकि, मैं Meteor Collection Hooks#.before.insert इस प्रकार का उपयोग किया। यदि यह अस्तित्व में नहीं है (उदाहरण के लिए पहला तत्व बनाया जाना है) तो हम पदों को शुरू करने के लिए 1.

पीएस: यदि आप कॉफीस्क्रिप्ट को नहीं समझते हैं, तो इस incredible tool (Js2coffee) पर कोड कॉपी करें।

संपादित करें: demo (उल्का के सर्वर पर बहुत धीमी गति से) और source code

Answer 3

उल्का की नई प्रतिपादन इंजन ब्लेज़ अब और अधिक अच्छी तरह से jQuery के साथ खेलता है: कृपया यहाँ एक स्टैंडअलोन संस्करण देखते हैं। Here is short video जो दिखाता है कि उल्का और jQuery-UI-sortable के साथ एक क्रमबद्ध सूची को कैसे कार्यान्वित किया जाए।

code can be found in the Meteor repository on GitHub in the example folder।

Answer 4

** के लिए 1.0

चेक बाहर MeteorPad अपडेट किया गया: http://meteorpad.com/pad/TzQTngcy7PivnCCjk/sortable%20demo

यहाँ संस्करण मैं लागू किया है - बहुत की tomsabin @ के समान है, लेकिन कोई संग्रह व्यवहार की जरूरत है। इसने कई उपयोगकर्ताओं के साथ मेरे लिए अच्छा काम किया है और प्रतिक्रियाशील है।

एचटीएमएल (शायद नहीं एक अच्छा विचार _ id के रूप में ही div id बनाने के लिए, मुझे यकीन है कि आप एक बेहतर वैकल्पिक हल मिल जाएगा हूँ।)

<template name="myList"> 
    <div class="step_list"> 
    {{#each card}} 
     {{> card_template}}   
    {{/each}} 
    </div> 
</template> 

<template name="card_template"> 
    <div class="card" id="{{_id}}">    
     <h3>{{name}}</h3> 
    </div> 
</template> 

जे एस

Template.myList.helpers ({ 
    card : function() { 
     return Cards.find({}, {sort: {pos: 1}} 
    )} 
}) 

Template.myList.rendered = function(){ 

    $(".step_list").sortable({ 
     items: ".card", 
     delay: 100, 
     refreshPositions: true, 
     revert: true, 
     helper: "clone", 
     scroll: true, 
     scrollSensitivity: 50, 
     scrollSpeed: 35, 
     start: function(event, ui) { 
     $(ui.helper).addClass("dragging"); 
     }, // end of start 
     stop: function(event, ui) { 
     $(ui.item).removeClass("dragging"); 
     }, // end of stop 
     update: function(event, ui) { 
     var index = 0;     
     _.each($(".card"), function(item) { 
      Cards.update({_id: item.id}, { 
      $set:{ 
       pos: index++, 
      } 
      }); 
     }); 
     } 
    }).disableSelection(); 

} 

Answer 5

उल्का और jQuery यूआई के साथ क्रमबद्ध सूचियों का सबसे हालिया उदाहरण अक्टूबर 2014 में अलग-अलग द्वारा पोस्ट किया गया था:

http://differential.com/blog/sortable-lists-in-meteor-using-jquery-ui

ध्यान दें कि उल्का ब्लेज़ टेम्पलेटिंग इंजन पर स्विच करने के बाद पिछले समाधान काम नहीं कर सकते हैं।