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
sortable实现拖拽功能的更多相关文章
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vue2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vuejs2.0使用Sortable.js实现的拖拽功能( 转)
文章目录 简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是 ...
- React Editor 应用编辑器(1) - 拖拽功能剖析
这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- el-transfer增加拖拽功能
el-transfer增加拖拽排序,左右互相拖拽功能: npm i sortablejs <template> <el-transfer ref="transfer&quo ...
- RCP:拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
- js实现登陆页面的拖拽功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...
随机推荐
- windows下GVIM的配置(vimrc)
学习python时想要在gvim中配置python的编译环境,网上找到一个比较好用的vimrc配置,保存下来以备下次有需要. set encoding=utf-8 set termencoding=u ...
- C++ STL标准模板库(queue)
//queue的使用 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<queue> using name ...
- 关于JSP生命周期的叙述,下列哪些为真?
关于JSP生命周期的叙述,下列哪些为真? A.JSP会先解释成Servlet源文件,然后编译成Servlet类文件 B.每当用户端运行JSP时,jspInit()方法都会运行一次 C.每当用户端运行J ...
- 64位系统下,一个32位的程序究竟可以申请到多少内存,4GB还是更多?(一)
前言: cpu的位是指一次性可处理的数据量是多少,1字节=8位,32位处理器可以一次性处理4个字节的数据量,依次类推.32位操作系统针对的32位的CPU设计.64位操作系统针对的64位的CPU设计.操 ...
- poj 2503 Babelfish(字典树或着STL)
Babelfish Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 35828 Accepted: 15320 Descr ...
- 时间戳(Unix时间)
/// <summary> /// 时间戳与DateTime互转 /// </summary> public class UnixOfTimeHelper { /// < ...
- Yii2 选择布局的方式
方案1:控制器内成员变量 public $layout = false; //不使用布局 public $layout = "main"; //设置使用的布局文件 方案2:控制器成 ...
- 房间WIFI信号不好怎么办?——无线路由桥接(WDS)
背景 1.无线路由在客厅,房间的WIFI信号很差,只有1-2格,虽说是100M的网速,但是从客厅到房间要经过3道墙!电脑的无线接收功能一般都很一般,网速不好理所当然. 2.弄一根网线从客厅连接起来很傻 ...
- JVM命令行工具&垃圾收集器&垃圾收集策略思维导图
1.JVM命令行工具 2.垃圾回收算法 3.垃圾收集器
- ios --转载-从URL中截取所包含的参数,并且以字典的形式返回和参数字典转URL
- (NSString *)keyValueStringWithDict:(NSDictionary *)dict { if (dict == nil) { return nil; } NSMutab ...