उपयोगकर्ता को ऑर्डर बदलने के लिए तालिका पंक्तियों को खींचने और छोड़ने का सबसे आसान तरीका क्या है?

Question

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

यह बहुत ही सुरुचिपूर्ण नहीं है। मैं चाहता हूं कि उपयोगकर्ता टेबल पंक्तियों को खींच और छोड़ने में सक्षम हो। मैंने स्क्रिप्टैकुलस और प्रोटोटाइप का थोड़ा सा उपयोग किया है और उनसे परिचित हूं। मैंने ड्रैग और ड्रॉप सूचियां की हैं, लेकिन इस तरह टेबल टेबल नहीं की है। किसी के पास न केवल पुनर्निर्देशन के लिए कोई सुझाव है बल्कि पुन: क्रमशः कैप्चरिंग को कैप्चर करना है?

इसके अलावा, उपयोगकर्ता अभी जेएस में गतिशील रूप से एक नई पंक्ति बना सकता है, ताकि पंक्ति को भी पुन: व्यवस्थित किया जा सके।

बोनस अंक यदि यह सीधे जावास्क्रिप्ट के बजाय आरजेएस के साथ किया जा सकता है।

Answer 1

मैंने पहले यह करने के लिए याहू उपयोगकर्ता इंटरफ़ेस पुस्तकालय का उपयोग किया है:

http://developer.yahoo.com/yui/dragdrop/

Answer 2

Scriptaculous sortables के बाद से यह में बनाया गया है जाने का रास्ता की तरह लगता है http://github.com/madrobby/scriptaculous/wikis/sortable

Answer 3

याहू इंटरफ़ेस था। मुझे अपेक्षा से आसान, चार घंटे से भी कम समय में काम कर रहा था।

Answer 4

MooTools सॉर्टेबल script.aculo.us से वास्तव में बेहतर हैं क्योंकि वे गतिशील हैं; MooTools सूची में आइटम को जोड़ने/हटाने की अनुमति देता है। जब एक नई वस्तु को script.aculo.us सॉर्ट करने योग्य में जोड़ा जाता है, तो आपको नया आइटम क्रमबद्ध करने के लिए क्रमबद्ध को नष्ट/पुन: बनाना होगा। यदि सूची में कई तत्व हैं तो ऐसा करने में बहुत अधिक ओवरहेड होगा। मुझे इस सीमा के कारण स्क्रिप्ट.एकुलो.यूस से अधिक हल्के म्यूटूल में स्विच करना पड़ा और उस निर्णय से बेहद खुश होना समाप्त हो गया।

एक नए जोड़े गए आइटम sortable बनाने का MooTools रास्ता बस है:

sortables.addItems(node); 

Answer 5

ठीक है, मैं कुछ और दस्त किया था और कुछ है कि ज्यादातर काम कर रहा है पता लगा।

edit.html.erb:

... 
<table id="invoices"> 
    <thead> 
    <tr> 
     <th>Id</th> 
     <th>Description</th> 
    </tr> 
    </thead> 
    <tbody id="line_items"> 
     <%= render :partial => 'invoice_line_item', :collection => @invoice.invoice_line_items.sort %> 
    </tbody> 
</table> 

<%= sortable_element('line_items', {:url => {:action => :update_index}, :tag => :tr, :constraint => :vertical}) -%> 
... 

एप्लिकेशन/नियंत्रक/invoices.rb

... 
def update_index 
    params["line_items"].each_with_index do |id, index| 
    InvoiceLineItem.update(id, :index => index) 
    end 
    render :nothing => true 
end 
... 

महत्वपूर्ण हिस्सा है: टैग =>: "sortable_element" में टीआर और पैरामीटर [ "line_items "] - यह आईडी की नई सूची देता है और ड्रॉप पर ट्रिगर होता है।

डेट्रिंट्स: एजेक्स कॉल ड्रॉप पर बनाता है, मुझे लगता है कि जब मैं उपयोगकर्ता को "सेव" करता हूं तो मैं ऑर्डर स्टोर और अपडेट करना पसंद करूंगा। आईई पर untested।

Answer 6

मुझे पसंद है jQuery http://docs.jquery.com/UI/Sortables

$ ("# MyList") sortable ({})।

आपको इसे जारी रखने के लिए कुछ कोड लिखना होगा लेकिन यह कठिन नहीं है।

Answer 7

Prototype और Scriptaculous साथ

:

Sortable.create('yourTable', { 
    tag: 'tr', 
    handles: $$('a.move'), 
    onUpdate: function() { 
     console.log('onUpdate'); 
    } 
});