`

可以拖放的排序列表

阅读更多


      实现一个可以,可以排序的列表,可以假设为:我们有一个需要播放的视频列表。如果,你想显示这些Video列表,并且实现拖放。

      那么,首先,你需要添加一个position的字段到Video的model。这应该通过如下的migrate文件实现:
script/generate migration add_position_to_videos position:integer

然后执行
 rake db:migrate.



       如果,希望实现拖放,那么必然要用js,所以先检查是不是加载了prototype和scriptaculous,然后,可以看index.html.erb

   <h1>Videos</h1>  
   <ul id="videos">  
     <% @videos.each do |video| %>  
       <% content_tag_for :li, video do %>  
         <%= link_to video.name, video_path(video) %>  
       <% end %>  
     <% end %>  
   </ul>  
   <%= link_to "New Video, new_video_path %>  


     那么,要实现可排序,那么需要添加sortable_element的helper到index,你还需要传送element的id和一个AJAX请求来更新位置。
   <%= sortable_element('videos', :url => 'sort_videos_path') %>  


这样的helper方法,就已经可以实现拖放了,但是新的顺序并没有保存到数据库。这就需要代码来完成逻辑了。

videos_controller.rb
   def sort  
     params[:videos].each_with_index do |id, index|  
       Video.update_all([’position=?’, index+1], [’id=?’, id])  
     end  
     render :nothing => true  
   end  


这样,我们就应该有了排序逻辑。

   def index  
     @videos = Video.all(:order => ’position’)  
   end  

然而,我们还应该考虑,路由的问题,才能使用。
   map.resources :videos, :collection => { :sort => :post}  

这段代码表明,我们的方法是调用POST请求,就是AJAX的XMLHTTP sort

下面,我们还有一些改进的办法,可以采用来表明可以拖动的类
 <% content_tag_for :li, video do %>  
   <span class="handle">[drag]</span>  
   <%= link_to video.name, video_path(video) %>  
 <% end %> 


   <%= sortable_element(’videos’), :url => sort_videos_path, :handle => ’handle’ %>  
CSS的设置
 li .handle { color: #777; cursor: move; font-size: 12px; } 


使用插件来实现列表
script/plugin install git://github.com/rails/acts_as_list.git

acts_as_list要添加到model里
   class Video < ActiveRecord::Base  
     acts_as_list  
   end  

完成了
分享到:
评论

相关推荐

    最新Sortable – 简单灵活的 js拖放排序插件

    只需几行代码,你就可以将任何HTML元素转化为可拖放排序的列表。例如,你可以将`&lt;ul&gt;`或`&lt;ol&gt;`列表,甚至`&lt;div&gt;`块元素转化为可排序的容器。其基本使用方法如下: ```javascript Sortable.create(byId('container')...

    listview拖放排序

    拖放排序是用户界面交互的一种常见特性,使得用户可以通过简单的拖拽操作来改变列表中的顺序。对于ListView控件来说,我们可以利用.NET Framework提供的内置支持来实现这一功能。以下是实现这个功能的关键步骤: 1....

    mootools实现图片拖放排序(不止是图片排序)

    本文将深入探讨如何利用MooTools实现图片拖放排序,这一功能不仅可以应用于图片,还可以用于任何可拖放的元素,如列表项、区块等。 **一、MooTools库介绍** MooTools是一个高级的JavaScript库,它采用模块化设计,...

    【原创】Gridview拖放排序,并保存到服务端

    通过以上步骤,我们可以构建一个完整的拖放排序系统,使用户可以在GridView中直观地调整数据项的顺序,并将这些变化安全地保存到后台数据库。这种功能对于那些需要频繁调整数据顺序的业务场景非常有用,例如任务管理...

    VueDraggableVuejs组件基于Sortablejs进行同步的拖放排序

    VueDraggable是Vue.js生态中的一个强大组件,它利用了Sortable.js库的拖放排序功能,使得在Vue应用中实现动态列表排序变得极其简便。Vue.js是一个轻量级的前端框架,强调数据驱动和组件化,而VueDraggable正是在这个...

    layoutit bootstrap3中文版可拖放排序在线编辑的bootstrap可视化布局系统

    在Layoutit中,用户可以直观地看到这些网格线,并通过拖放来创建复杂且响应式的布局。此外,Layoutit还提供了丰富的预设样式和组件,如Jumbotron、Alerts、Buttons、Navbars等,这些都可以直接添加到设计中,大大...

    DDSort, 一个简单轻量级的拖放排序jQuery插件.zip

    在描述中提到的HTML结构,`&lt;div class="wrap"&gt;`是包裹整个可排序区域的容器,而`&lt;ul&gt;`和`&lt;li&gt;`则代表列表项,这些列表项是可以被拖放排序的元素。DDSort插件会监听这些元素的拖放事件,通过jQuery事件处理函数实现...

    Vuejs2x响应式格网系统具有平滑排序拖放和重新排序

    `vuedraggable`提供了强大的拖放和列表重新排序功能,可以轻松集成到Vue项目中。使用这个库,你可以创建可拖动的Vue组件,并监听拖放事件,从而更新数据模型。例如,你可以用`&lt;draggable&gt;`组件包裹网格项,并通过`v-...

    最新Sortable – 简单灵活的 JavaScript 拖放排序插件

    Sortable是一款强大的JavaScript库,专为实现拖放排序功能而设计。它提供了简单、灵活的API,使得在网页中实现元素的动态排序变得轻而易举。这个插件可以在各种HTML元素上工作,如列表(`&lt;ul&gt;`,`&lt;ol&gt;`)、网格(`...

    JavaScript_可重新排序的拖放列表为现代浏览器和触摸设备,不需要jQuery或框架.zip

    这个名为"JavaScript_可重新排序的拖放列表为现代浏览器和触摸设备,不需要jQuery或框架.zip"的资源,专注于利用纯JavaScript实现一个功能强大的可拖放排序列表,特别适合于现代浏览器和触摸设备。这个解决方案不...

    table-dragger, 轻松拖放排序表.zip

    table-dragger, 轻松拖放排序表 表 dragger最后,你可以根据需要拖动和排序表。 演示试用演示程序。 !的灵感table dragger是一个用于构建可以重新排列drag-and-drop表的极简的普通Javascript库。特性超级容易设置ac

    dragon-drop, 可以访问的拖放列表重新排序模块.zip

    dragon-drop, 可以访问的拖放列表重新排序模块 Drop 可以访问的键盘/辅助技术drag-and-drop重新排序列表。 演示http://schne324.github.io/dragon-drop/demo/ 进入。For look look see see

    实现拖放列表的任意一行进行重新排列

    DragSortController负责监听触摸事件,处理拖放过程,而SortableListView是可排序的ListView子类,支持拖放排序。 4. **触摸事件处理**:在drag-sort-listview中,触摸事件被转化为拖放操作。当用户长按时,会启动...

    active_scaffold_sortable:花式裤子ActiveScaffold的可拖放排序列表

    用于ActiveScaffold的拖放排序当前,此插件与Rails&gt; = 4.0和ActiveScaffold&gt; = 3.3 gem兼容。 将3.2.x用于rails 3.x版本。概述这个插件可以在活动支架页面上启用那些流畅的ajax拖放式可排序元素,只需很少的配置,您...

    Vue实现拖放排序功能的实例代码

    组件的template部分定义了拖放排序的界面,通过`draggable`属性设置可拖动的列表项,并通过绑定各种拖放事件来处理拖放逻辑。组件的script部分定义了相应的事件处理方法,与之前的Vue实例类似,通过dataTransfer对象...

    学习使用ReactDnD实现嵌套列表的拖拽排序

    在React应用中,实现拖放排序功能可以极大地提升用户体验,特别是在处理列表或树形结构数据时。ReactDnD(React Drag and Drop)是一个流行的库,它为React组件提供了简单的拖放API。在这个主题中,我们将深入探讨...

    原生JS实现拖拽排序(亲测可用)

    原生JS实现拖拽排序可以避免引入额外的库,从而提高页面性能和减少依赖。以下是一个详细的知识点说明,涵盖了如何用原生JS实现拖拽排序的关键步骤。 1. **事件监听**: - 首先,我们需要为可拖动元素添加`...

    html5拖放排序

    总之,HTML5拖放排序功能是现代Web应用中一个实用且直观的交互方式,结合JavaScript和CSS可以创建出高效、用户友好的排序体验。通过理解并运用上述技术,开发者可以为网站增加更多的互动性和功能性。

    拖放重新排序列表

    "拖放重新排序列表"功能就是一个很好的例子,它允许用户通过拖动列表项来直观地改变列表顺序,为应用增添了动态性和便利性。本项目由作者woxblom创建,名为DragListView,它是一个实现了拖放功能的Android项目,基于...

    HTML5拖放API实现拖放排序的实例代码

    在实现拖放排序的实例代码中,我们首先需要了解拖放API中的几个基本概念,包括draggable属性、拖放事件以及dataTransfer对象。 首先,为了使一个元素可以被拖放,我们需要设置该元素的draggable属性为true。这个...

Global site tag (gtag.js) - Google Analytics