sortable實現拖拽功能

使用sortable這個強力插件就很容易實現拖拽功能，它是目前比較牛逼的拖拽插件，無需jquery，就能夠全面支持pc和移動，參考如下github文檔就有很詳細的說明，也給了不少 demo，插件就用我給你的那個就能夠，不用額外添加其餘庫 GitHub：https://github.com/RubaXa/Sortable
 如下的simple demo是我本身寫的，就這麼幾行簡單代碼就完事了 simple demo： html code： <input type="hidden" value="" name="template_ending_order" id="template_ending_order">
<ul class="list-group" id="sort-ending-list">
    <li class="list-group-item" draggable="false">致謝</li>
    <li class="list-group-item" draggable="false">結論</li>
    <li class="list-group-item">參考文獻</li>
</ul>
<submit id="form-save">保存</submit)
 js code： $(document).ready(function(){ var ulElement = document.getElementById('sort-ending-list'); if (ulElement != null) { var sortable = Sortable.create(ulElement, { ghostClass: "sort-ghost" }); } $("#form-save").submit(function() { setEndingOrder("#template_ending_order") }); }); 經過這個函數，將你的拖動結果拼接成一個字符串，好比："結論;參考文獻;致謝"，你這個地方能夠選擇id做爲拼接結果，好比「1；2；3」 function setEndingOrder(endingOrderId){ var ulElement = document.getElementById('sort-ending-list'); var liElements = ulElement.children; var value = ""; for (var i=0; i<liElements.length; ++i) { if (i < liElements.length -1) value += liElements[i].innerHTML + ';'; else value += liElements[i].innerHTML; } var inputElement = document.getElementById(endingOrderId); inputElement.value = value; }

class Template < ActiveRecord::Base ENDING_PARTS = [ Setting.templates.ending_order_conclusion, Setting.templates.ending_order_reference, Setting.templates.ending_order_resume ] validates :chapter_count, :presence => true, :inclusion => { :in => 1..9 } validates :conclusion, :presence => true, :inclusion => { :in => [0,1] } validates :achievement, :presence => true, :inclusion => { :in => [0,1] } validates :introduction, :presence => true, :inclusion => { :in => [0,1] } # Conditional Validation not Working
  validates :ending_order,      :presence => true, :if => :valid_ending_order? def valid_ending_order? cur_parts = self.ending_order.split(';') cur_parts.each do |part|
      if ENDING_PARTS.include?(part) == false return false; end end return true; end end

 def update @thesis = Thesis.find(params[:thesis_id]) @template = @thesis.templateif @template.update(template_params) 　　　　　　。。。。。。 else render :edit end else render :edit end end private def template_params params.require(:template).permit(: :resume, :ending_order, :introduction) end def structure_params params.require(:template).permit(:structure_id) end