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

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

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

sortable.js 拖拽排序及配置项说明

// 拖动排序 $(function() { /*排序*/ //排序 // Simple list ]; new Sortable(list, { group: "name", animation: , //动画参数 store: null, // @see Store /* handle: ".BtnMove",*/ // 点击目标元素开始排序(只能拖拽当前元素) draggable: ".application-li", // 指定那些选项需…

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

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

js 禁用右键菜单、拖拽、选中、复制

//禁用拖拽 document.ondragstart = function () { return false; }; /** * 禁用右键菜单 */ document.oncontextmenu = function () { event.returnValue = false; }; /** * 禁用选中功能 */ document.onselectstart = function () { event.returnValue = false; }; /** * 禁用复制功能 */ doc…

katalon系列十：Katalon Studio自定义关键字之拖拽

Katalon Studio自带关键字“Drag And Drop To Object”,可以在这个网站实践:http://jqueryui.com/droppable/#default 不过“Drag And Drop To Object”是针对类似jQuery比较典型的框架,如果是HTML5的话,可能就不能执行成功.这时我们就可以使用Katalon Studio的Keywords功能,自定义一个HTML5的拖拽关键字. 1.右击左侧目录菜单中的Keywords--New--Package,输…

通过jquery-ui中的sortable来实现拖拽排序

1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel="stylesheet" href="Public/css/jquery-ui.min.css"> <script src="{sh::PUB}js/jquery-ui.min.js"></script> 2.给元素附上s…

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…

View拖拽自定义绑定view拖拽的工具类

由于工作需求,需要用到这种处理方法所以我就写了这个废话不多说先看效果图接下来就看代码吧 DragDropManager import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.PixelFormat; import android.util.Log; import android.view.Gravity; impo…

vue全局自定义指令-元素拖拽

小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function (el) { el.onmousedown=function(ev){ var disX=ev.clientX-el.offsetLeft; var disY=ev.clientY-el.offsetTop; document.onmousemove=function(ev){ var l=ev.cl…

（原创）[C#] 一步一步自定义拖拽（Drag&Drop）时的鼠标效果：（一）基本原理及基本实现

一.前言拖拽(Drag&Drop),属于是极其常用的基础功能. 无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等. 这些拖拽时的鼠标效果,直观又美观. 然后,在我们写程序时,程序确实是支持了拖拽,但是效果却是这样的: 很是朴实无华. 而在某些时候,我们的程序也需要比较个性化的拖拽效果. 所以,我们就通过这一系列文章,来一步一步实现自己的个性化拖拽效果,同时,也会去仿一些经典的拖拽效果. 相信看完的你,一定会有所收获! 本文…

QT笔记之自定义窗口拖拽移动

1.QT自定义标题栏,拖拽标题栏移动窗口(只能拖拽标题,其他位置无法拖拽) 方法一: 转载:http://blog.sina.com.cn/s/blog_4ba5b45e0102e83h.html .h文件中 //自己重新实现拖动操作 protected: void mouseMoveEvent ( QMouseEvent * event ); void mousePressEvent ( QMouseEvent * event ); void mouseReleaseEvent(QMouseE…

Jquery.Sorttable 桌面拖拽自定义

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Portlets</title> <script src="jquery-1.6.2.js"></script> <script src="jquery.u…

jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的百度了一下问题,http://blog.csdn.net/samed/article/details/50703704,在这个博文里面提到了this.scrollParent.scrollTop(),那么对这个位置进行断点调试.(当然最开始也尝试了一下注释了这个地方,并没什么用) 在这个处理过程中,我发现我得拖拽对象的scrollParent并不是想象中的直接上级,而是不知上了多少级的父…

Magicodes.WeiChat——自定义knockoutjs template、component实现微信自定义菜单

本人一向比较喜欢折腾,玩了这么久的knockoutjs,总觉得不够劲,于是又开始准备折腾自己了. 最近在完善Magicodes.WeiChat微信开发框架时,发现之前做的自定义菜单这块太不给力了,而各种第三方平台在这一块做得也比较渣,功能不全不说,界面还很不友好,于是决心重整一版,以满足需求. 下面先上图,新的UI界面如下所示: 如何实现这个功能呢?下面请等我一一道来吧. 左侧树形结构绑定 HTML模板如下所示: <div class="dd" id="nestable…

ASP.NET MVC5+EF6+EasyUI 后台管理系统（74）-微信公众平台开发-自定义菜单

系列目录引言 1.如果不借用Senparc.Weixin SDK自定义菜单,编码起来,工作量是非常之大 2.但是借助SDK似乎一切都是简单得不要不要的 3.自定义菜单无需要建立数据库表 4.自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单. 5.一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以“...”代替. 6.创建自定义菜单后,菜单的刷新策略是,在用户进入公众号会话页或公众号profile页时,如果发现上一次拉取菜单的请求在5分钟以前,就会拉取一下菜单,如果菜…

用c#开发微信（5）自定义菜单设置工具（在线创建）

读目录 1 使用 2 原理 3. 错误上次写了<用c#开发微信 (4) 基于Senparc.Weixin框架的接收事件推送处理 (源码下载)>,有园友问到如何创建菜单的问题,今天就介绍下如何创建自定义菜单. 回到顶部 1 使用 1.1 打开自定义菜单设置工具 1.2 输入id和密码以获取token 如果已有token,也可以直接输入token进行菜单操作,注意这个token不是在微信上设置的token,是通过id和密码获取到的: 1.3 点击"获取当前菜单" 以获取菜…

《C#微信开发系列（2）-自定义菜单管理》

2.0自定义菜单管理 ①接口说明微信服务号聊天窗口下面的菜单项(有的公众号有启用有的则没有),这个可以在编辑模式简单配置,也可以在开发模式代码配置.微信公众平台开发者文档:微信公众号开发平台创建自定义菜单,可以看到创建菜单的一些注意事项,下面的使用网页调试工具调试该接口,只是调试接口是否可以正常调用,并不是直接创建菜单,根据微信自定义菜单管理文档菜单事件可分为两种: click: 用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event 的结构给开发者(参考消息接口指南)…

微信公众平台自定义菜单新增扫一扫、发图片、发位置 LBS运作更便捷

今天微信公众平台发布更新,自定义菜单新增扫一扫.发图片.发送位置等功能,这对于有意挖掘微信LBS服务的运营者来说更便捷了,订阅号不用返回微信界面就能扫图.发送图片.调用地理位置,用户体验更友好,自然也提高了黏度,对涨粉也好一些.详细能力如下: 公众号自定义菜单新增扫一扫.发图片.发位置功能 1. 扫码推送事件用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后显示扫描结果(如果是URL,将进入URL),且会将扫码的结果传给开发者,开发者可以下发消息. 2. 扫码推送事件,且弹出“消息接收…

C#/ASP.NET MVC微信公众号接口开发之从零开发（四）微信自定义菜单(附源码)

C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发(二) 接收微信消息并且解析XML(附源码) 3.C#/ASP.NET MVC微信公众号接口开发之从零开发(三)回复消息 (附源码) 自定义菜单开发 1.配置Json字符串首先配置菜单/menu所需要的Json字符串,然后用post请求微信接口地址即可.配置json格式参看微信接口文档:http:/…

微信公众平台创建自定义菜单中文编码导致system error

创建包含了中文的自定义菜单时总是返回{"errcode":-1,"errmsg":"system error"},要将编码方式设置为UTF-8.…

Senparc.Weixin.MP SDK 微信公众平台开发教程（九）：自定义菜单接口说明

上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>介绍了如何通过通用接口获取AccessToken,有了AccessToken,我们就可以来操作自定义菜单,以及其他的高级接口,这一篇单讲自定义菜单. 一.自定义菜单规则自定义菜单分为一级菜单和二级菜单. 一级菜单数量为1-3个,即打开公众账号直接可以看到排列在最下方的最多3个按钮.一级菜单的文字最多不能超过16字节(相当于8个汉字). 二级菜单从属于一级菜单,数量为1-5个.二级菜单的文字不最多不能…

django xadmin自定义菜单

1. 自定义菜单 adminx.py class GlobalSetting(object): site_title = u'xxx后台' def kuF_site_menu(self): return [{ 'title': u'用户&账户', 'perm': self.get_model_perm(User, 'view'), 'icon':'fa fa-users', 'menus':( {'title': u'用户', 'url': self.get_model_url(User, 'c…

.NET微信公众号开发-2.0创建自定义菜单

一.前言开发之前,我们需要阅读官方的接口说明文档,不得不吐槽一下,微信的这个官方文档真的很烂,但是,为了开发我们需要的功能,我们也不得不去看这些文档. 接口文档地址:http://mp.weixin.qq.com/wiki/13/43de8269be54a0a6f64413e4dfa94f39.html 看了这些个文档,基本意思明白了,就是我们把我们要创建的菜单创建好,post到微信的服务器上面,微信服务器然后给我们一些状态码,从而判断我们的菜单是否创建成功,只是在发送json数据以前我们要做…

.NET微信公众号开发-3.0查询自定义菜单

一.前言前面我们已经创建好了我们的自定义菜单.那么我们现在要如何查询我们自定义的菜单.原理都是一样的,而且都是相当简单,只是接口地址文档换掉了. 2.0开始编码同样我们首先创建好我的查询页面,在这里我们使用aspx页面 selectMenu.aspx protected void Page_Load(object sender, EventArgs e) { var str = GetPage("https://api.weixin.qq.com/cgi-bin/token?grant_ty…

获取token，绑定微信号，自定义菜单，事件响应demo

摘要: 这个demo包含了获取token,绑定微信号,设置自定义菜单,响应文本和事件这个教程的基础篇和提升篇都看完了,总感觉有点隔靴挠痒的感觉,讲的东西我都懂,没有吸收多少新鲜的知识.貌似还没有我这个一年前写的脚本好呢,估计也是照顾新人吧.期待高级篇的讲解,不过现在高级篇估计还在录制当中,所以对微信公众平台开发的学习就先到这里吧. 下面介绍一下我很久以前写的这个脚本.基本上常用的几个功能都有了,access_token的获取,用户的微信号和公司的账号的绑定,查询公司服务器上的数据,自定义表单什…

dedecms为后台自定义菜单的完整方法

dedecms为后台自定义菜单的完整方法品味人生 dedeCMS 围观7330次 18 条评论编辑日期:2014-06-14 字体:大中小最近在给客户定制一个企业网站,客户要求使用dedecms作为管理后台. 由于客户提出了许多定制功能,因此会用到dedecms较多的内置功能来实现. 可是dedemcs的功能都相对分散,如果交付到用户手中,难免会使用户难以学习与使用. 因此,这里就需要我们在后台为客户定制一个快捷类型的菜单,将分散在各个模块中的功能整理到一起,使用户能够易学易用.…

Magcodes.WeiChat——自定义CustomCreationConverter之实现微信自定义菜单的序列化

微信自定义菜单接口是一个比较麻烦的接口,往往开发的小伙伴们看到下面的这段返回JSON,整个人就会不好了: {"menu":{"button":[{"type":"click","name":"今日歌曲","key":"V1001_TODAY_MUSIC","sub_button":[]},{"type":…

Force.com微信开发系列（五）自定义菜单进阶及语音识别

在上文里我们介绍了如何通过Force.com平台里为微信账号添加自定义菜单,本文里我们将进一步介绍如何查询菜单以及删除菜单的相关知识,最后会介绍微信平台如何进行语音识别的相关技术. 查询菜单与创建菜单类似,查询菜单有自己的接口,其中ACESS_TOKEN需要通过前文介绍到的接口获取,通常2小时后会失效: https://api.weixin.qq.com/cgi-bin/menu/get?access_token=[ACCESS_TOKEN] 为此首先通过前文介绍到的获取Access_Toke…

Force.com微信开发系列（四）申请Access Token及自定义菜单之创建菜单

在微信接口开发中,许多服务的使用都离不开Access Token,Access Token相当于打开这些服务的钥匙,正常情况下会在7200秒内失效,重复获取将导致上次获取的Token失效,本文将首先介绍如何获取Access Token,再介绍如何通过Access Token来在微信内添加自定义菜单(注意,开发者需要申请测试账号来测试自定义菜单,如何申请请参照前文). 申请Access Token 获取Access Token接口的网址如下: https://api.weixin.qq.com/c…

【使用knockout-sortable实现对自定义菜单的拖拽排序】的更多相关文章