首页
学习
活动
专区
圈层
工具
发布

jQuery ui中sortable draggable droppable的使用

最近工作中用到了jQuery UI中排序和拖拽功能,花了大概一天的时间,搞清楚了大概的参数配置,以及遇到的一些问题,总结如下。...// 之所以不使用 helper: 'clone', 是因为clone的元素没有样式,所以我们需要自定义样式,所以使用了自定义函数。...否则第一次初始化后,比如某个地方A可以放置拖拽的元素,但是第二次初始化后,地方A就不可以放置了。然而实际上,如果你不把第一次初始化的dropInit函数销毁掉,地方A在第二次初始化后还是可以放置的。...所以需要在拖拽停止的时候,销毁上一次的dropInit对象。.../sortable/ https://www.html.cn/jquery-ui-api/draggable/ https://www.html.cn/jquery-ui-api/droppable

3.3K10

iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

在公司做项目一直使用Storyboard,虽然有时会遇到团队合作的Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算的。...在之前的博客中也提到过,团队合作使用Storyboard时,避免冲突有效的解决方法是负责UI开发的同事最好每人维护一个Storyboard, 公用的组件使用轻量级的xib或者纯代码来实现。...言归正传,接下来就介绍一下如何使用Storyboard来预览UI在不同那个分辨率屏幕上的运行效果,这就很好的避免了每次调整约束都要Run一下才能看到不同平面上运行的效果,今天的博客就来详述一下如何使用Storyboard...一、创建工程添加测试使用的UIImageView     创建一个测试工程,在ViewController上添加4个不同尺寸的UIImageView, 并且添加上不同的约束,最后添加上不同的文艺小清新的图片...2.把上述所有设备添加上以后的预览效果如下图所示,这种预览效果仅限于使用Storyboard实现的控件,然而用纯代码写的UI就没有这么幸运了。预览效果如下: ?

3.5K80
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    解决innerHtml 在Jquery上使用无效果的问题

    ").innerHTML = "加载本页耗时 "+ (new Date().getTime()-t1) +" 毫秒"; 或 使用Jquery的方式: $("#timeShow").html('加载本页耗时...' + loadTime + 'ms'); innerHTML在JQuery中使用的话是无效果的, JQuery提供了三种方法实现指定标签赋内容:.html(),.val(),.text()。...三种方法区别具体: .html()用为读取和修改元素的HTML标签 对应js中的innerHTML .html()是用来读取元素的HTML内容(包括其Html标签), .html()方法使用在多个元素上时...对应js中的innerText text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上 .val()用来读取或修改表单元素的value值 .val()是用来读取表单元素的..."value"值,.val()只能使用在表单元素上 关于三者的区别 .val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样

    1.6K10

    前端常用插件

    jquery-ui: jQuery 团队开发的 UI 相关的前端库,功能强大 todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端...,兼容性良好 (兼容到 IE6),插件丰富,性能良好 jquery.smartbanner: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android...倒计时插件 summernote: WYSIWYG 富文本编辑器 awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观 switchery: IOS 7 上 Switch...的 JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品的富文本编辑器,简洁小巧 sensor.js: 在智能移动设备浏览器上,通过HTML5的api使用移动设备的功能。...Sortable: 现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery Swiper: 用于实现浏览器上的滑动切换效果,支持硬件加速 matter-js

    5.9K61

    jQuery插件jQueryUI

    themes/base/jquery-ui.css">基本用法 jQuery UI提供了一系列易于使用的UI组件和效果,包括对话框、拖拽、排序、自动完成、日期选择器等。...通过设置autoOpen选项为false,使对话框初始时不显示。使用modal选项将对话框设置为模态对话框,即禁止用户操作其他页面元素。在对话框初始化之后,我们通过点击按钮来打开对话框。...对话框中的按钮通过buttons选项进行定义,并指定点击按钮后的处理逻辑。常用UI组件和效果 以下是jQuery UI中一些常用的UI组件和效果:对话框(Dialog):用于创建自定义对话框。...除了上述组件和效果外,还有很多其他组件和效果可供选择和使用。可以根据具体需求,在jQuery UI官方文档中查找相关组件的详细文档和示例。...主题和定制 jQuery UI还提供了主题(Theme)的概念,可以通过使用不同的主题文件,改变组件的外观和样式。可以根据需要选择不同的主题或进行自定义定制。

    5.1K20

    【Wordpress】后台载入很慢

    写在前面: 博客搭建了有一段时间了,最近发现后台打开的特别慢,之前也比较慢。不过可能最近比较高产,想写点东西,后台打开的速度让有一点点代码洁癖的我有点无法忍受。...原因剖析: 打开 F12 我们看一下是哪些资源在拖后腿,果不其然,我们看到 load-styles.php 和 load-script.php 这俩文件耗费了大几十秒!就是你,病因所在。 ?...c=0&load%5B%5D=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable...wp-plupload,mediaelement-core,mediaelement-migrate,wp-mediaelement,wp-api-req&load%5B%5D=uest,media-views,jquery-ui-draggable...,jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker&ver=5.2.1 这个链接在一起的 js 每次点击后台菜单或选项都会重新加载以便而不是从缓存中读取

    2.9K20

    Vue.Draggable 文档总结

    最好使用vuex来实现传入。 不是直接使用,而是通过v-model引入。...和v-model不能共用 从表现上没有看出不同 element String,默认div 就是标签在渲染后展现出来的标签类型 也是包含拖动列表和插槽的外部标签 可以用来兼容UI...delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间 touchStartThreshold:number (不清楚) disabled: boolean 定义是否此sortable...对象是否可用,为true时sortable对象不能拖放排序等功能 store: animation: umber 单位:ms 动画时间 handle: selector 格式为简单css...moved:内部移动的 newIndex: 改变后的索引 oldIndex: 改变前的索引 element: 被移动的元素 插槽 提供一个footer插槽,在排序列表之下

    13K20

    前端插件以及部分细分网址梳理

    类似于 Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创建索引,离线也可以使用 jquery.hotkeys: jQuery 插件,用于绑定热键 breach_core: Javascript...实现的 javascript JIT jquery-ui: jQuery 团队开发的 UI 相关的前端库,功能强大 todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的...这个插件提供了对早期 IOS4/5 和 Android 的支持 jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等 jScrollPane...IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品的富文本编辑器,简洁小巧 sensor.js: 在智能移动设备浏览器上,通过HTML5的...Sortable: 现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery Swiper: 用于实现浏览器上的滑动切换效果,支持硬件加速 matter-js

    6.8K90

    jQuery基础(五)一Ajax应用与常用插件-imooc

    UI型插件 本章介绍包括拖曳、放置、排序在内的各类UI插件的使用过程,介绍各类微型插件的使用方法和注意事项,以及最新版UI中菜单工具、微调按钮、工具提示插件的效果和使用方法。  ...使用ajaxSetup()方法设置全局Ajax默认选项 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: jQuery.ajaxSetup...3-2放置插件——droppable 除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下: $(selector...,options为调用方法时的配置对象, 例如,在页面中,通过加载sortable插件将元素中的各个表项实现拖曳排序的功能,如下图所示: 在浏览器中显示的效果: 3-4面板折叠插件—...3-5选项卡插件——tabs 使用选项卡插件可以将中的选项定义为选项标题,在标题中,再使用元素的“href”属性设置选项标题对应的内容,它的调用格式如下: $(selector).

    19.2K20

    为Vue2集成UIkit

    每个引入的第三方包我们都得吝啬地测算一下得失,即使webpack可以用chuck来分包,但也不能滥用,否则加载速度缓慢就是破坏使用体验的最大因素。...但jQuery的强大在于它的普及性,几乎我们能找到的很多优秀小组件都会有jQuery版本,甚至只有jQuery的版本。而UIkit正是其中一员,不能抗拒的话也只能学会享受。...我们可以在插件内对confirm做一个修饰,将回调方法的this重新指向Vue实例: Vue.prototype.$ui = { // ......$,这个变量其实是对jQuery的一个内部引用,准确地说这是在引用jQuery的脚本后由jQuery注册到浏览器的window全局变量上的jQuery实例。...这个插件是用于JS代码加载后在window上注册全局变量的一个webpack插件,加入了以上的配置后程序就能正常运行了。

    1.7K20

    Cypress web自动化39-.trigger()常用鼠标操作事件

    前言 在web页面上经常遇到的鼠标事件有:鼠标悬停操作,鼠标右键,鼠标长按,拖拽等操作 trigger() trigger 方法用于在 DOM 元素上触发事件 语法使用示例 .trigger(eventName...参数说明 eventName(字符串) event 在DOM元素上要触发的的名称。 position(字符串) 应该触发事件的位置。该center位置是默认位置。...x(数字) 从元素左侧到触发事件的距离(以像素为单位)。 y (数字) 从元素顶部到触发事件的距离(以像素为单位)。 options 传递选项对象以更改的默认行为.trigger()。...在触发事件发生之前,DOM元素必须处于interactable(可交互)状态(它必须可见并且不能禁用) cy.get('button').trigger('mouseover') // yields '...jQuery UI sortable模拟拖放,需要pageX和pageY属性以及 which:1 cy.get('[data-cy=draggable]') .trigger('mousedown'

    3.6K30

    bootsrap+jquery+组件项目引入文件的常见报错报错一:Uncaught ReferenceError: $ is not defined报错二:jsp页面相对路径和绝对路径的问题:报错三:

    做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种类型的错误,在开发中每次遇到错误都善于总结,下次在看到就会胸有成竹知道是什么情况了,以下是在开发过程中总结的一些错误以及错误的解决方法...图片.png 错误原因:文件加载的顺序不对,jQuery文件的顺序要在前面 ? 图片.png 方法:把jQuery文件写在所有script文件前面 ?...图片.png 原因:包括两个不同版本的jQuery UI。这可能会导致冲突。...像这样使用它,解决了我的问题!...报错四:Uncaught TypeError: $(...).sortable is not a function Uncaught TypeError: $(...).sortable is not

    27K40

    前端项目里常见的十种报错及其解决办法

    network,按F5刷新如下 图片.png 对于这种莫名其妙,上一秒还能正常显示,这一秒就出现了错误的bug,我通常重启一下编辑器,重启一下浏览器,就正常了,不要问我为什么,我拿这种蜜汁bug也没有办法...: 图片.png 做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种类型的错误,在开发中每次遇到错误都善于总结,下次在看到就会胸有成竹知道是什么情况了,以下是在开发过程中总结的一些错误以及错误的解决方法...jQuery UI。...像这样使用它,解决了我的问题!...报错九:Uncaught TypeError: $(...).sortable is not a function Uncaught TypeError: $(...).sortable is not

    98610
    领券