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

sortable实现拖拽功能的更多相关文章

  1. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  2. vue2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  3. vuejs2.0使用Sortable.js实现的拖拽功能( 转)

    文章目录   简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是 ...

  4. React Editor 应用编辑器(1) - 拖拽功能剖析

    这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...

  5. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  6. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  7. el-transfer增加拖拽功能

    el-transfer增加拖拽排序,左右互相拖拽功能: npm i sortablejs <template> <el-transfer ref="transfer&quo ...

  8. RCP:拖拽功能的实现 Drag and Drop

    SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...

  9. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

随机推荐

  1. windows下GVIM的配置(vimrc)

    学习python时想要在gvim中配置python的编译环境,网上找到一个比较好用的vimrc配置,保存下来以备下次有需要. set encoding=utf-8 set termencoding=u ...

  2. C++ STL标准模板库(queue)

    //queue的使用 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<queue> using name ...

  3. 关于JSP生命周期的叙述,下列哪些为真?

    关于JSP生命周期的叙述,下列哪些为真? A.JSP会先解释成Servlet源文件,然后编译成Servlet类文件 B.每当用户端运行JSP时,jspInit()方法都会运行一次 C.每当用户端运行J ...

  4. 64位系统下,一个32位的程序究竟可以申请到多少内存,4GB还是更多?(一)

    前言: cpu的位是指一次性可处理的数据量是多少,1字节=8位,32位处理器可以一次性处理4个字节的数据量,依次类推.32位操作系统针对的32位的CPU设计.64位操作系统针对的64位的CPU设计.操 ...

  5. poj 2503 Babelfish(字典树或着STL)

    Babelfish Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 35828   Accepted: 15320 Descr ...

  6. 时间戳(Unix时间)

    /// <summary> /// 时间戳与DateTime互转 /// </summary> public class UnixOfTimeHelper { /// < ...

  7. Yii2 选择布局的方式

    方案1:控制器内成员变量 public $layout = false; //不使用布局 public $layout = "main"; //设置使用的布局文件 方案2:控制器成 ...

  8. 房间WIFI信号不好怎么办?——无线路由桥接(WDS)

    背景 1.无线路由在客厅,房间的WIFI信号很差,只有1-2格,虽说是100M的网速,但是从客厅到房间要经过3道墙!电脑的无线接收功能一般都很一般,网速不好理所当然. 2.弄一根网线从客厅连接起来很傻 ...

  9. JVM命令行工具&垃圾收集器&垃圾收集策略思维导图

    1.JVM命令行工具 2.垃圾回收算法 3.垃圾收集器

  10. ios --转载-从URL中截取所包含的参数,并且以字典的形式返回和参数字典转URL

    - (NSString *)keyValueStringWithDict:(NSDictionary *)dict { if (dict == nil) { return nil; } NSMutab ...