`
chinapkw
  • 浏览: 111327 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

可拖拽,保存展开收起状态的个人主页

阅读更多
<li id="my_list_b">two<div id="my_friend_2" style="display:<%if @user.position[3]=="1"%>block<%else%>none<%end%>"></li>

 

核心就用到了

sortable_element(element_id, options = {}) 
Makes the element with the DOM ID specified by element_id sortable by drag-and-drop and make an Ajax call whenever the sort order has changed. By default, the action called gets the serialized sortable element as parameters. 

Example: 

  <%= sortable_element("my_list", :url => { :action => "order" }) %>

In the example, the action gets a "my_list" array parameter containing the values of the ids of elements the sortable consists of, in the current order. 

Important: For this to work, the sortable elements must have id attributes in the form "string_identifier". For example, "item_1". Only the identifier part of the id attribute will be serialized. 

Additional options are: 

:format: A regular expression to determine what to send as the serialized id to the server (the default is /^[^_]*_(.*)$/).  
:constraint: Whether to constrain the dragging to either :horizontal or :vertical (or false to make it unconstrained).  
:overlap: Calculate the item overlap in the :horizontal or :vertical direction.  
:tag: Which children of the container element to treat as sortable (default is li).  
:containment: Takes an element or array of elements to treat as potential drop targets (defaults to the original target element).  
:only: A CSS class name or arry of class names used to filter out child elements as candidates.  
:scroll: Determines whether to scroll the list during drag operationsif the list runs past the visual border.  
:tree: Determines whether to treat nested lists as part of the main sortable list. This means that you can create multi- layer lists, and not only sort items at the same level, but drag and sort items between levels.  
:hoverclass: If set, the Droppable will have this additional CSS class when an accepted Draggable is hovered over it.  
:handle: Sets whether the element should only be draggable by an embedded handle. The value may be a string referencing a CSS class value (as of script.aculo.us V1.5). The first child/grandchild/etc. element found within the element that has this CSS class value will be used as the handle.  
:ghosting: Clones the element and drags the clone, leaving the original in place until the clone is dropped (defaut is false).  
:dropOnEmpty: If set to true, the Sortable container will be made into a Droppable, that can receive a Draggable (as according to the containment rules) as a child element when there are no more elements inside (defaut is false).  
:onChange: Called whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.  
:onUpdate: Called when the drag ends and the Sortable‘s order is changed in any way. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the container as its parameter.  

 

页面端。把各个显示的部分存成partials
_my_a.rhtml

<li id="my_list_a">one<div id="my_friend_1" style="display:<%if @user.position[2]=="1"%>block<%else%>none<%end%>"></li>

 

_my_b.rhtml

 

这样,在拖拽完成后,可以向action=>order 提交。一个字段为 my_list 的参数["a","b"]

保存位置:action

Table.position = params[:my_list]

思路就是保存在表中的数据position 字段中根据数组的 index显示位置 把各个部分写成partial

显示的action

@order = Table.find(id).position

页面端

<%= render :partial => "partials/my_#{@order[0]}", :locals=>{:u => @user}%>
<%= render :partial => "partials/my_#{@order[1]}", :locals=>{:u => @user}%>

这样就完成的排序的功能。现在我们要加上各个块的状态保存

页面端改变块的状态

function my_shrink(obj,p)
{
 shrink_div = obj.id + "_1"
 if(document.getElementById(shrink_div).style.display=="block")
 {
  document.getElementById(shrink_div).style.display="none";
  obj.src = "/展开.gif";
               new Ajax.Updater('tmp_div', '/position/shrink/0?p='+p, {asynchronous:true, evalScripts:true});
 }else
 {
  document.getElementById(shrink_div).style.display="block"
  obj.src = "/收起.gif"  
               new Ajax.Updater('tmp_div', '/position/shrink/1?p='+p, {asynchronous:true, evalScripts:true});
 }
}


这是点击状态改变按钮触发的事件,把位置的状态保存

:action

Table.position.index[:params[:P]] = params[:id]

这样就保存的状态。

positon 字段存储为

['a','b','1','1']

分享到:
评论

相关推荐

    Vue拖拽组件列表实现动态页面配置功能

    需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来... 左边组件拖拽过程中不改变其展开和收起状态 demo截图 代码地址 vue-draggable-list 代码预览 &lt;div cla

    jQuery模仿Remember The Milk 写的个人任务管理界面

    例如,拖动任务项可以调整其在列表中的顺序,点击任务项可以展开或收起详细信息,双击可以编辑任务内容。 5. **CSS样式与布局**:CSS用于定义任务管理界面的外观和布局。项目可能使用了响应式设计,确保在不同设备...

    Axure RP 核心训练(翻译).pdf

    动态面板可以设定为自动显示(如对话框)、滑动切换(如选项卡)、展开收起(如列表项)等。通过设置动态面板的状态和交互,可以创建出具有动态变化效果的高保真原型。 核心知识点五:条件、值,以及变量 在进行...

    chapPhotoshopCS文件基本操作PPT教学课件.pptx

    - **合并拷贝**:先确保所需图层为可见状态,选中图像,使用【编辑】&gt;【合并拷贝】将选区内容拷贝到剪贴板,合并了所有选中的图层信息。 - **粘贴与选择性粘贴**: - **粘贴**:在新的位置,通过【编辑】&gt;【粘贴...

    百叶窗式面板组-源代码

    - 可定制性:用户应能自定义面板组的布局和显示状态,保存并加载设置。 - 性能优化:确保面板切换和布局更新的流畅性,避免卡顿。 - 易用性:面板的图标和标签应清晰易懂,操作直观,减少学习成本。 总结来说,百叶...

    Axure首次制作网站原型

    3. **动态面板**:动态面板是Axure的一大特色,它可以封装一组可交互的内容并进行状态切换,如导航菜单的展开与收起、轮播图等。通过面板,你能轻松实现复杂的交互效果。 4. **页面链接与跳转**:在网站原型中,...

    悬浮按钮Demo

    5. 交互设计:悬浮按钮与其他界面元素的交互也应遵循Material Design规范,例如,当用户滚动列表时,悬浮按钮可能会上下移动,或者在展开和收起抽屉式导航时改变位置。 悬浮按钮Demo通常包含一个完整的示例项目,...

    网页---搜索器

    - **UI管理模块**:提供了多种人性化的设计,如双击标题栏展开或收起搜索结果、拖动标题栏调整项目排序等。 - **数据管理模块**:定义了输入字段的格式和输出结果的展示方式。 #### 五、技术实现 - **详细设计思路*...

    Android源码——listview 滑动删除(具体效果360手机卫士后台通知).zip

    8. **滑动冲突解决**:在某些情况下,ListView中的子View可能有自己的滑动事件,如ExpandableListView的展开/收起。这时,我们需要正确处理滑动事件的分发,防止冲突。 实现滑动删除功能涉及的代码相对复杂,需要对...

    苹果iPhone隐藏功能大揭秘.pdf

    在iPhone自带浏览器上网看视频时,可以将两只手指放在视频上,展开手指是控制全屏,收起手指就是缩屏。这项功能非常实用,能够让您更好地观看视频。 隐藏功能2:取消操作 如果您不小心点错了地方的时候,手指只要不...

    Android代码-圆形滑动菜单源码.zip

    这可能涉及到`GestureDetector`类或者自定义的`TouchListener`,通过监听滑动、拖动等手势来控制菜单的展开和收起。 3. **动画(Animation)** 在Android中,`ObjectAnimator`、`ValueAnimator`和`AnimatorSet`等类...

    Android-一简单的库根据MaterialDesign规范创建BottomSheets

    它们可以以动画形式展开,展示更多信息,也可以通过手势收起。 3. **类型**:Bottom Sheets 分为两种主要类型:**Modal Bottom Sheets** 和 **Persistent Bottom Sheets**。Modal 类型完全覆盖屏幕,直到被关闭;而...

    C# 常见的事件

    - **应用场景**:可用于执行资源清理、保存状态等操作,在窗体关闭前进行必要的处理。 #### CloseUp **触发方式说明**:在下拉日历中选择一个日期时由日期时间采集器触发。 - **应用场景**:特别适用于日历控件,当...

    32个uniapp项目源码 涵盖商城团购等-网盘链接提取码下载.txt

    - **滑动展开**:通过滑动手势展开或收起分类菜单。 ### 十二、自定义底部导航栏 - **知识点**: - **图标与文字**:支持自定义图标和文字描述。 - **页面跳转**:点击导航项时实现页面跳转。 ### 十三、全局...

    Android自定义侧滑View/侧滑菜单控件(源码)(非第三方)

    在Android应用中,状态保存和恢复是必不可少的,尤其是当用户旋转屏幕时。开发者可能实现了 `onSaveInstanceState()` 和 `onRestoreInstanceState()` 方法,确保侧滑菜单的状态在配置更改后可以恢复。 7. 主题与...

Global site tag (gtag.js) - Google Analytics