随意拖拽排序的菜单导航栏

2024-09-06

【原创】js实现一个可随意拖拽排序的菜单导航栏

1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换.未添加和已添加里面的小方块位置可以拖放. 3.结构分析.整体结构用红线框标出.可以分为三个部分.关注底部拖拽部分.一个div里面嵌套两个div.定位关系如图.本次教程之作一个拖拽框 1.好了,基本情况已经分析清楚先实现页面样式. <div class="wrap"> <

使用knockout-sortable实现对自定义菜单的拖拽排序

在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需要说明的是排序的实现. 我们先来看看关键的页面代码: <div class="row"> <div class="col-lg-12 full-width" id="leftMenus"> <div class=&quo

jQuery可拖拽排序列表jquery-sortable-lists

jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜单. GitHub地址: https://github.com/camohub/jquery-sortable-lists js代码: var options = { placeholderCss: {'background-color': '#ff8'}, hintCss: {'backgroun

jquery sortTable拖拽排序

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeholder - 占位符(如果有定义的话) ui.sender

jquery自定义插件-参数化配置多级菜单导航栏插件

1 自定义菜单导航栏插件的必要性看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. 使用插件时,可以修改默认参数,目前插件提供了设置菜单的分布方式:横向或纵向:菜单的位置:依赖上一级菜单栏的定位:上下左右定位. 修改调用参数,将一二级菜单改为纵向排列:并将三级菜单的显示位置改为二级菜单栏的右侧(其他的和默认保持一致),修改后运行效果如下图: 细心的观察,会发现上面两个菜单导航栏的

jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title> </

dragsort html拖拽排序

一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通过dragsort我们可以很方便地对html页面上的素动态地推拽,进行排序.dragsort是一个jquery插件,我们使用起来非常方便.dragsort网站为:dragsort下载地址为:http://dragsort.codeplex.com/ .下载dragsort之后,解压如下图所示, 我们

RecyclerView拖拽排序和滑动删除实现

效果图如何实现那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的功能. 实现的代码非常简单我们只需要两步: 实例化一个ItemTouchHelper 关联到RecyclerView 恩,就是这么简单. 构造方法中需要一个ItemTouchHelper.Callback,ItemTouchHelper会在拖拽的时候回调Callback中相应的方法,我们只需在Cal

ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）

ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样,仅仅是范围缩小了一些,多了一些推断而已.以下是每一层的代码.还是採取仅仅贴出功能代码.由于这个拖拽排序功能我感觉非常不错,所以单独拿出一篇博客来展示,也方便理解. Jsp页面实现功能的js代码例如以下: //拖拽前运行 var dragId; function beforeDrag(treeId,

ListView列表拖拽排序

ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首先是搭建框架,此处的ListView列表相似于QQ消息列表,当然数据不过模拟,为了简单起见,没有把ListView的条目的所有的属性所有写上.首先是消息的实体类Msg.java: package me.chenfuduo.mymsgdrag; public class Msg { private i

zTree的拖拽排序

ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比如自定义一个tree传入ztree, 不使用ztree的识别字段,而是使用自定义字段,然后当ztree的节点发生变化时,维护这些自定义字段,从而使得整个tree是有序的,并支持拖拽. 上边的这个解决方案,有一个问题,就是使用javascript构造的tree,传入ztree之后,会发生堆栈溢出,初步

RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图代码分析 ItemTouchHelper是一个工具类,可实现侧滑删除和拖拽移动,使用这个工具类需要RecyclerView和Callback.同时根据需要重写onMove和onSwiped方法. 使用步骤一.项目组织结构图注意事项: 1. 导入类文件后需要change包名以及重新import R文件路径 2. Values目

php接口实现拖拽排序功能

列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题如何实现才能达到效率最高呢先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都会影响到其他数据例如把最后一条拖到最前面,那么后面九条就自动往后移,反之也是,嗯~~~ 先想象一下,排序号是固定的,就好像有十把椅子,每个椅子都是固定在那里的,移动的是上面的人,这样就不会影响到其他页面的数据了而且每个人换的也是之前其他人的桌椅号码,这样也不用去想到底要加多少才能排在哪里. 接口

js 实现拖拽排序

<!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拖拽排序</title> <style> .sortable-ghost { opacity: 0.4; background-colo

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

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http://rubaxa.github.io/Sortable/ 技术交流qq群 302817612 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件

GridView实现拖拽排序以及数据交互

在研究项目中的一个效果的时候,查找资料过程中发现有人有这么一种需求,就是GridView在实现拖拽排序的基础上,如果是两个GridView之间实现拖拽效果,并要实现数据交互. 一.效果图: 实现这个效果需要考虑的事情: ① 这个UI整体的构建以及事件的传递 ② 如何实现View的共享,穿过边界二.实现思路: 对于单个GridView的拖拽效果实现是参考网上的一篇文章,很抱歉没能及时保存地址,所以这里就不贴了. 整体实现: 一个容器(DragChessView)里放置两个DragView(可拖拽

RecyclerView拖拽排序；

效果就是这样,RecyclerView列表可拖拽排序,可删除,可添加: RecyclerView给我们提供了一个手势器: ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.Callback() { @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int drag

odoo开发笔记-tree列表视图拖拽排序

odoo列表tree视图拖拽排序实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 """ _name = 'xxxxxxx' _order = "sequence, id" sequence = fields.Integer(string='Sequence') 前端view视图增加相应字段: <tree string="xxxx

Sortable拖拽排序插件数据筛选

后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_order = []; var new_sort_order = []; for (i in old_ids_order) { if(old_ids_order[i] != ids_order[i]){ new_ids_order.push(ids_order[i]) new_sort_order.pus

react 拖拽排序---原生

定义css, 两个动画 .drag-up { -webkit-animation: dragup ease 0.2s 1; animation: dragup ease 0.2s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: red; } .drag-down { -webkit-animation: dragdown ease 0.2s 1; animatio

随意拖拽排序的菜单导航栏

热门专题