sortable实现拖拽功能

Posted 2021-01-19 znsongshu

使用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