文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Vue.Draggable 文档总结

特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的...格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放 ghostClass: selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况...当排序的容器是个可滚动的区域，拖放可以引起区域滚动 scrollFn：function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl...，当pull:'clone时的拖拽的回调函数’ 就是克隆的意思。...newIndex: 添加后的新索引 element: 被添加的元素 removed: 从列表中移除的元素 oldIndex: 移除前的索引 element: 被移除的元素

13.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    从 antDesign 来窥探移动端“滚动穿透”行为

    现象 直观上来说所谓的 Scroll Chaining（滚动链接）通常会在两种情况下被意外触发： 拖动不可滚动元素时，可滚动背景意外滚动。...将可滚动元素拖动至顶部或者底部时，继续拖动触发最近可滚动祖先元素的滚动。 还有另一种常见场景，我们在某个可滚动元素上进行拖动时，当该元素的滚动条已经到达顶部/底部。...我们在子元素区域内进行拖拽时，当子元素滚动到底部（顶部）时，仍然继续往下（上）进行拖动。 原理 上述两种情况相信大家也日常业务开发中碰到过不少次。...想象一下，如果你的页面中每个 Modal 弹窗都使用了 useLockScroll 这个 hook ，那么当页面中开启两个弹窗，当关闭一个时另一个还存在时总不能移除了 BODY_LOCK_CLASS 吧...这点最初我也不太明白为什么这么做，所以我也去 vant 中进行了请教，详见 vant Discussions。

    1.6K20

    drag事件详解：html5鼠标拖动排序及resize实现方案分析及实践

    拖放事件事件详情 一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内。这里，我暂时把被拖放的元素称为源对象，被经过的元素称为过程对象，到达的元素称为目标对象。...，被拖拽对象离开目标对象时触发 拖动事件列表 每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始-->拖动过程中--> 拖动结束 在拖动目标上触发事件 (源元素-被拖动的元素): ondragstart...- 在元素开始被拖动时候触发——拖动什么 ondrag - 在元素被拖动时反复触发 ondragend - 在拖动操作完成时触发 释放目标时触发的事件(目的地对象): ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件...ondragover - 当被拖动元素在目的地元素内时触发——放到何处 ondragleave - 当被拖动元素没有放下就离开目的地元素时触发 ondrop - 在一个拖动过程中，释放鼠标键时触发此事件...当被拖动元素进入目的地元素所占据的屏幕空间时触发 dragover 当被拖动元素在目的地元素内时触发 dragleave 当被拖动元素没有放下就离开目的地元素时触发 整个拖拽事件触发的顺序如下：

    8.4K21

    基于HTML5 Canvas和jQuery 的画图工具的实现

    从输出的结果可以看出，结果和我们预期的并不一样。这是为什么呢？  ...那么，我们怎样才能判断当鼠标移动时，鼠标键是否被按下呢？...当然了，使用canvas 肯定是实现不了的，这里我想到了一个方法，就是使用 元素模拟我们需要绘制的矩形，当用户在拖动鼠标的过程中，使用DIV 显示矩形的信息，一旦用户松开鼠标，那么，将此DIV...类似地，绘画直线和添加文字也是通过HTML伪装的逻辑： 绘画直线时，用户在画板上拖动并按下鼠标时，动态地显示出一条使用HTML伪装的直线，可以随着用户鼠标的移动而变化，当用户松开鼠标时，对应模拟直线的...HTML元素隐藏，调用javavscript绘制真正的直线； 添加文字时，这里使用的元素 进行模拟文本输入框，当用户在画板上添加文字时，可以拖动鼠标设置输入框的大小，然后输入文字，

    3.4K40

    【JS】1724- 重学 JavaScript API - Drag and Drop API

    如何使用 使用拖放 API 主要包括以下 3 个步骤： 「定义可拖拽的（draggable）元素」：将需要拖动的元素标记为可拖拽，并指定相应的事件处理逻辑。...「定义可放置的（droppable）元素」：将用来放置被拖动元素的目标区元素标记为可放置，并指定相应的事件处理逻辑。...当拖动 drag-source 元素时，使用 event.dataTransfer.setData() 方法设置了拖动数据，而放置目标元素时，执行 drop事件监听的回调方法，实现被拖动的元素添加到可放置元素底下...在放置目标容器上，我们使用 dragover 事件阻止默认行为并添加一些过渡样式，使用 dragleave 事件移除过渡样式，使用 drop 事件在放置目标容器中追加拖动的图片元素。...当拖动任务卡片时： 使用 dragstart 事件将任务名称存储在 dataTransfer 对象中； 使用 dragover 事件阻止默认行为并添加视觉反馈； 使用 dragleave 事件移除视觉反馈

    1.8K20

    DOM 高级工程师不完全指南

    三年前我初入前端坑的时候，发现了一个叫做 jQuery 的宝贝，她有一个神奇的 $ 函数，可以让我快速选中某一个或一组 DOM 元素，并提供链式调用以减少代码的冗余。...也就是说，closest 方法可以从特定的 HTMLElement 向上发起查询，找到第一个符合指定 css 表达式的父元素（也可以是元素自身），如果找到了文档根节点还没有找到目标时，就会返回 null...移除 DOM 元素 上面提到的兄弟方法 insertAdjacentElement 也可以用来对已存在的元素进行移动，换句话说：当传入该方法的是已存在于文档中的元素时，该元素仅仅只会被移动（而不是复制并移动...element 16: otherElement 被 element 所包含 那么问题来了，为什么上面例子中第一行的结果是20、第二行的结果是10呢？...值发生改变的属性名，如果不是属性变更，则返回 null previousSibling: 被添加或移除的子元素之前的兄弟节点 nextSibling: 被添加或移除的子元素之后的兄弟节点 根据目前的信息

    97910

    jQuery 教程

    大家好，又见面了，我是你们的朋友全栈君。...该事件方法在 jQuery 语法 章节中已经提到过。 click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。...; } ); focus() 当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。...方法 描述 $.Deferred() 返回一个链式实用对象方法来注册多个回调 deferred.always() 当Deferred（延迟）对象被受理或被拒绝时，调用添加的处理程序 deferred.done...() 当Deferred（延迟）对象被受理时，调用添加的处理程序 deferred.fail() 当Deferred（延迟）对象被拒绝时，调用添加的处理程序 deferred.isRejected()

    21.1K20

    DOM 高级工程师不完全指南

    三年前我初入前端坑的时候，发现了一个叫做 jQuery 的宝贝，她有一个神奇的 $ 函数，可以让我快速选中某一个或一组 DOM 元素，并提供链式调用以减少代码的冗余。...元素的局部搜索 当需要查找元素时，不一定每次都基于 document 去查找。开发者可以在任何 HTMLElement 上进行 DOM 元素的局部搜索： ? 事实证明，每个优秀的开发者都是很懒的。...也就是说，closest 方法可以从特定的 HTMLElement 向上发起查询，找到第一个符合指定 css 表达式的父元素（也可以是元素自身），如果找到了文档根节点还没有找到目标时，就会返回 null...element 16: otherElement 被 element 所包含 那么问题来了，为什么上面例子中第一行的结果是20、第二行的结果是10呢？...值发生改变的属性名，如果不是属性变更，则返回 null previousSibling: 被添加或移除的子元素之前的兄弟节点 nextSibling: 被添加或移除的子元素之后的兄弟节点 根据目前的信息

    92710

    jQuery 升级踩坑大全

    前段时间我就主导了这件事情，把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3。jQuery官方也为类似升级工作提供了jQuery Migrate插件。...，当时还是采用的jQuery 1.4.2，这次升级步子迈得算是比较大。...事实上，live函数将$(selector)代理到了document元素上，这个元素是肯定存在的，所以不会出现类似情况。...JQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated 实践中我发现，早期写的代码里面，获取一个input输入表单的值时，是怎么获取的呢？...浏览器怪异模式是为了兼容老古董网页而设计的，详情可参考这篇文章：链接。我想现在的WEB程序员应该不会傻到不写DOCTYPE，也很少使用这种模式下的浏览器吧。

    4.4K90

    不写一行代码实现mobile自动化

    ，参数为 True，False clickable 可点击的元素，参数为 True，False longClickable 可长按的元素，参数为 True，False scrollable 可滚动的元素...text='Settings').long_click() 拖动 # 在 0.25S 内将 Setting 拖动至 Clock 上，拖动元素的中心位置 # duration 默认为 0.5, 实际拖动的时间会比设置的要高...() 监控界面 使用 wather 进行界面的监控，可以用来实现跳过测试过程中的弹框 当启动 wather 时，会新建一个线程进行监控 可以添加多个 watcher 用法 # 注册监控 , 当界面内出现有...allow 字样时，点击 allow d.watcher.when('allow').click() # 移除 allow 的监控 d.watcher.remove("allow") # 移除所有的监控...，如果不知道，写代码的时智能提示就可以找到了。

    1.5K50

    HTML5原生拖放事件的学习与实践

    而拖动又由 2 部分组成，分别是被拖动元素的相关事件和元素容器的相关事件。...1、被拖动元素的相关事件 ： 事件名称 说明 dragstart 在元素开始被拖动时候触发 drag 在元素被拖动时反复触发 dragend 在拖动操作完成时触发 2、容器的相关事件 ： 事件名称 说明...dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发，一般需要取消浏览器的默认行为。...dragover 当被拖动元素在目的地元素内时触发，一般需要取消浏览器的默认行为。...dragleave 当被拖动元素没有放下就离开目的地元素时触发 3、释放事件 ： 事件名称 说明 drop 当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

    1.6K20

    历时大半年，Github团队成功减少30kb依赖体积

    组长啪的一下拍桌子：“那得是996的小作坊才这么干！我们大公司做事得专业，这事儿得「稳步迭代，增量解耦」”。 首选：我们得建立指标跟踪，统计每行代码中jQuery的调用次数。...最后，jQuery作为一个模块化的库，为了保证「稳步移除」，我们需要维护一个自定义jQuery版本。 每当确定一个模块不再使用，就从自定义版本中移除他，并提供一个更小体积的版本。...比如：当完全用fetch替换$.ajax后，就能将AJAX模块剔除。 “这一通操作下来，没有半年工作量，我看不行。”组长轻靠椅背，轻轻摇了摇头，说道。 ? 升华主题 你以为这就完啦？...naive～ 前面做的，只能说稳步推进工作。接下来说的，才是KPI的重中之重。 jQuery被移除，项目必然出现很多原生JS。 重复代码多了得抽象、得封装是吧？ “您是说上框架！...Vue的模版语法也是根据Web Components标准演化来的。” “我们要引！领！时！代！” 从现在开始，所有可复用的功能组件都封装为Web Components。

    81330

    JQuery 入门学习(完结)

    大家可以看到，我用到的就是target属性，event.target指的就是触发mouseover事件的DOM元素，在这里就是td。     所以在函数中，我们得到了鼠标所在的元素。...event.target.parentNode).remove(); $("#buy").append('' + name + "/" + price + '元'); });     就是一个当某个格子被点击时...看第一行，我们会发现，event.target.parentNode我认识，但为什么要把它放在$()中间？     这就涉及到DOM对象转换成Jquery对象的过程。...于是这里就得到了我点击的这一行的商品名和价格。然后用$(event.target.parentNode).remove();把这一行移除，再用append把内容加到“购物车”里。...除了我说的这些，Jquery还有个很重要的性质：可扩展性。大家如果有兴趣可以学习，网上也有很多用Jquery开发的插件，比如md5本地加密、弹出悬浮框、分页特效。

    1.3K10

    我曾用 Angular 重写了 jQuery 应用，如今却被 React 逼疯了

    就在我以为我退出了的时候… 就在我自以为已经退出了的时候，我最近又回到了 React。 当然，这只是一个业余项目，所以我没有把它当一个严肃的生产应用来对待。...事实上，我唯一能想到的是：如果我们不能很好地解决这个问题，那么也许整个“组件架构”就是一个错误，我们就不应该称之为优秀设计的典范，并停止创新。...为什么 我们不能只是说 React 疯了，然后就不管了。作为理性的灵长类动物，我相信我们可以做得更好。我们可以尝试理解它。 我想起了我的第一份工作，想起了 “jQuery 迁移 ”项目中的一位同事。...具有讽刺意味的是，这意味着移除 FP（函数式编程）风格的 React，服务器端渲染的页面实际上成了状态的一个纯函数。没有前端状态 = 简洁性大获全胜，如果你能负担得起的话。...我谷歌了一下，结果发现 这个名已经被用了。不过，那篇文章还提到了 Preact、SSR、清单文件，所以我不确定我们的看法是否一致。人们会把一切都搞得过于复杂。

    24600

    看不完的那种！前端170面试题+答案学习整理（良心制作）

    jquery ui则是在jquery的基础上对jquery的扩展，是jquery的插件。jquery ui提供了一些常用的界面元素，如对话框，拖动行为，改变大小行为等。...当dom完全加载时，jquery允许你执行代码，使用$(document).ready()最大的好处在于它适用于所有浏览器，jQuery有助于解决跨浏览器兼容性问题。...p标签内部的超链接a: $('p a') 56.jquery中的detach()和remove()方法的区别 detach()和remove()方法都可以移除一个dom元素： remove()将元素自身移除的同时...，也会移除元素内部的一切，包括绑定的事件以及与该元素相关的jquery数据 detach()虽然可以将元素自身移除，但是它不会删除数据和绑定事件 57.如何利用jquery，来向一个元素添加或移除css...cdn上下载了jquery文件，再次打开页面时，不会再次下载 59.jQuery.ajax()和jQuery.get()方法之间的区别 ajax()方法更强大，可配置性更强，可以指定等待多久，以及如何处理错误

    13.1K50

    从GitHub.com放弃使用jQuery说起

    让我干唠是唠不出来什么的，因为咱没怎么用过js，只是最近在学习vue.js，看到了一篇GitHub官方在2018年发布的解释为什么放弃前端框架jQuery的文章，心血来潮，想读一遍，顺便翻译出来，以帮助理解...默认情况下，当没有匹配到选择器时，jQuery 会默默地跳过整个表达式，对我们来说，这是 bug 而不是功能。...例如，在我们删除了 jQuery 的 CSS 伪选择器（如 :visible或 :checkbox）之后，我们就能够删除 Sizzle 模块；当最后一个 $.ajax调用被 fetch() 替换时，我们能够删除...例如， 默认显示原始时间戳，被升级为将时间戳转换为本地时区的时间；当 嵌套在 中时，即使没有 JavaScript 也具有交互功能...至于译文中难免存在错误的或者纰漏，欢迎批评指正！ 本来都打算发布了，结果在查一个概念的时候发现之前有人已经翻译过了，就取长补短了一下。 参考文章 GitHub：我们为什么会弃用jQuery？

    1.3K20

    vue 中基于html5 drag drap的拖放

    事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。 案例一： 开始的我，so easy！...但是，右边元素被拖走了，右边就没有了，然后我尝试了各种，拖动开始时clone 元素，drap时clone元素等等，都不太完美。...直接看代码好了，反正是给我自己看的）：左边列表元素可拖动（draggable=’true’）,绑定dragstart(开始事件)，不要给它绑定draging(拖动事件)，这样左边列表元素有拖动属性，但是位置不会改变...当右侧拖动区域 第一次触发了drop 操作后，新生成一个对象，这个对象既有拖动（draggable=’true’）属性,也绑定dragstart(开始事件)，拖动事件（drag）,这样新元素会在右侧随意拖动...，可以分享一下，基于jquery 的拖拽插件，我用过几个，但是总觉得vue中用jq有点怪。

    2.1K00
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券