关于鼠标光标的移动，我可以“欺骗”jQuery Draggable吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Raphael path 拖动实现

（很可惜，并不支持手机 UC 浏览器） Raphael 对于交互事件也有一定的支持，比如常用的鼠标的拖放操作（Drag and Drop）。在官方网站上也有拖放操作的例子。...this.attr({opacity: 0.8}); }; p.drag(move, start, up); 运行效果如下上面的例子有几点要说明一下回调函数 move 的第一个和第二个参数永远是鼠标所在的点距移动初始时的鼠标位置的相对位移值...那么，是不是能做出来类似 jQuery.ui 里面的 draggble 的函数呢。下面就是一个简单的扩展，为 Raphael 对象加入了 draggable 方法。...里 draggable 的能力。...(); 可以看到，像 jquery.ui 提供的功能一样，只需要简单的调用 .draggable() 就可以让对象被鼠标拖拽

2.2K5 0

vue 中基于html5 drag drap的拖放

事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。案例一：开始的我，so easy！...通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！...let disY = e.clientY - odiv.offsetTop document.onmousemove = e => { // 鼠标按下并移动的事件...// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 let left = e.clientX - disX let top = e.clientY...，基于jquery 的拖拽插件，我用过几个，但是总觉得vue中用jq有点怪。

2.1K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

自己写一个jqery的拖拽插件

大家好，又见面了，我是全栈君，祝每个程序员都可以多学几门语言。说实话，jQuery比原生的js好用多了，本来想用原生写的，也写出来的，仅仅是，感觉不像插件，所以用jQuery实现了一版。...拖拽的原理事实上比較简单，就是在鼠标落下后，加入�一个mousemove事件，让元素尾随鼠标移动，鼠标抬起后，移除刚才的事件。...,top:...}的对象 * } * 支持的自己定义事件: * "draggable.start":drag起始，就是鼠标down后触发 * "draggable.move":drag...过程中多次触发 * "draggable.stop":drag结束触发，就是鼠标up后触发 */ //draggable常量 $.zUI.draggable = { defaults...); } } 须要说明的有几点： 1.鼠标落下后，要记录鼠标相对元素的位置，mousemove的过程中，要把这段距离减去； 2.jQuery的data方法，这种方法很方便，能够讲数据和相应的元素绑定

1.2K2 0

HTML中拖放介绍

1.在jQuery UI里面会经常使用Draggable和Droppable，实现Web开发中拖放效果，当然这不是原生条的拖放，所以在处理复杂的拖放上还是需要自己动手写很多代码，最近开发中就遇到这个问题...没有具体开发过mobile web应用，不知道jQuery UI的draggable和droppable是否支持手机上的触摸操作。...Web拖放发展历史第一阶段：因为HTML和DOM可以处理底层的鼠标事件，所以早起的开发人员可以借助Javascript和CSS，DOM事件基础，可以近似实现一个简单的拖放功能。...mousemove 如果鼠标没有松开，则是移动操作需要判定拖动还是选择?...mouseover 鼠标移动到了每个元素上放置在哪个元素上面 mouseout 鼠标移除了某个元素，此元素不再是可放置的元素需要为用户给出提示吗?

4.1K10 0

draggable的用法_draggable

大家好，又见面了，我是你们的朋友全栈君。一、概述通过前面几节学习，大家应该都知道了，一个div对象是可以通过拖拉来改变大小，也可以通过拖动来改变其位置的。...现在就开始讲解如何实现拖动 — Draggable。...140px; 16: margin: 10px; 17: } 18: 19: jquery.js...scroll:false, //设置当拖动超出整个浏览器窗口,是否滚动浏览器 12: distance: 20, //设置当鼠标拖动多少像素时对象才会移动...设置对象被拖动释放后时候回到原始位置 23: helper: "clone" 24: }); 25: }); 26: 27: 28: jQuery

1.4K2 0

jQuery ui中sortable draggable droppable的使用

最近工作中用到了jQuery UI中排序和拖拽功能，花了大概一天的时间，搞清楚了大概的参数配置，以及遇到的一些问题，总结如下。...cursor: 'move', // containment: '.sub-box', // 可以限制draggable只能在指定的元素或区域的边界以内进行拖动。...distance: 10, opacity: 0.8, zIndex: 10000, refreshPositions: true, // 所有的可拖动位置在每次鼠标移动时都会被计算...(dragId); } else { // 移动题目到另一个分页 if(dropId === me.selectedPage.id) { // 移动到自己的分组.../sortable/ https://www.html.cn/jquery-ui-api/draggable/ https://www.html.cn/jquery-ui-api/droppable

3.3K1 0

基于jsplumb构建的流程设计器

变迁的添加/删除活动/变迁数据的全部读取根据json渲染活动与变迁相关引入依赖如下表所示名称功能 jsplumb.js 设计器主要依赖，用于绘制相关图形与动态操作实现 jquery.js jsplumb...依赖的库 jquery-ui.js jsplumb依赖的库，进行拖拽绑定 contextMenu.js 实现右击菜单 mustache.js 模板引擎渲染活动，避免字符串拼接实现思路活动添加通过...mustache的render方法渲染添加到html后，需要调用draggable方法让活动能够进行自由拖动，其中grid参数作用是固定每次拖拽移动最小距离，便于不同节点经过移动后对齐 draggable方法的stop方法注册实现 jsPlumb.draggable(id, { containment: 'parent',...如果我们通过接口获取已有数据，需要通过connect方法进行代码渲染变迁需要注意jsplumb中connection的id为自动生成，我们需要通过setAttribute方法对canvas进行id赋值操作，才能绑定我要自己的

8762 0

WEB入门之十九 UI

是实现对话框组件的js文件；jquery.ui.mouse.js提供了鼠标拖动对话框的支持；jquery.ui.draggable.js实现了鼠标拖动；jquery.ui.position.js提供了对话框居中显示功能...Ø draggable：用来设置是否可以拖拽对话框进行移动，默认值为true。 Ø height/width：用来设置对话框的高/宽。...表9-1-2 交互行为组件组件名称说明 Draggable 该组件可以使鼠标拖动页面元素 Resizable 该组件可以使鼠标调整页面元素的大小 9.1.1 Draggable...，其中jquery.ui.draggable.js是实现鼠标拖动的js文件。...图9.2.2 手风琴相册 3：可拖动的菜单训练技能点 Ø jQuery Draggable 需求说明在实训任务1的基础上，实现通过鼠标可以拖动工具栏，但是只能拖动到页面的上端或下端

2.3K1 0

Vue.Draggable 文档总结

特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操作当需要完全控制时，可以抛出所有变化可以和现有的...和v-model不能共用从表现上没有看出不同 element String，默认div 就是draggable>标签在渲染后展现出来的标签类型也是包含拖动列表和插槽的外部标签可以用来兼容UI...delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间 touchStartThreshold:number (不清楚) disabled: boolean 定义是否此sortable...) { … } 用于自定义滚动条的适配 scrollSensitivity: number 就是鼠标靠近边缘多远开始滚动默认30 scrollSpeed: number 滚动速度函数配置...to: 移动到的列表的容器 from：来源列表容器 item: 被移动的单元 clone: 副本的单元 oldIndex：移动前的序号 clone function,默认值

13.1K2 0

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

前言关于讲解 JS 的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。...这是我在编写插件时遇到的问题，其实很多插件的拖拽功能并没有处理这些细节，经过翻阅 jquery ui 的源码才找到答案。...拖拽实现关于拖拽功能不再啰嗦，直接贴代码 /** * [draggable 拖拽方法] * @param {[type]} modal [移动元素] * @param {[type]} handle...('#modal', '#modal .modal-header'); 我们可以通过第二个参数指定不同的拖拽元素，比如可以指定整个 modal 为拖拽元素 draggable('#modal','#modal...排除特定元素的方法关于如何排除特定元素的方法，很多人会推荐阻止冒泡的方法，但是我试了很多次，这种方法是不行的，因为拖拽事件绑定在了 document 对象上。

5.9K9 0

HTML5 drag和drop的亲手实践

首先，先放一个我的demo，大家可以去那里随便拖动一下玩一玩: https://chenjigeng.github.io/example/drag.html 知识储备与drag和drog有关的属性和事件...draggable属性: 如果你想让一个元素变得可以拖曳的话，那么你就必须设置它的draggable=true，如下 draggable="true"> 这样，该元素就可以拖动了 ondragstart: 当元素开始被拖动时，触发该事件，目标对象是被拖动的元素 ondragover: 当被拖动元素在悬挂元素上移动的时候,该事件触发。...// 当被拖动元素在悬挂元素上移动的时候,该事件触发。目标对象是被拖动元素悬挂的那个元素。...insertNode, node.nextElementSibling) } else { node.parentNode.appendChild(insertNode) } } // 当松开鼠标的时候

1.2K3 0

使用 React-DnD 打造简易低代码平台

“拖拽”实现关键词就是“拖拽”，其实“拖拽”的交互方式早在 Jquery 时代就有，关于拖拽在前端实现主要分为 2 种是以 jquery-ui 为代表的 draggable 和 Droppable...id 并将已移动的元素添加到目标的 DOM 中 const data = ev.dataTransfer.getData("application/my-app"); ev.target.appendChild...(event)">This element is draggable....嵌套拖动基本组件一般可以嵌套的，比如我现在想要拖动出下图的页面效果实际上我需要生成 JSON 树，然后根据 JSON 树渲染出页面。...希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

7.3K2 0

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

之前一般会使用jQuery-UI（interactjs更加纯粹）。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现，更加方便（省去计坐标计算等）。...为了使元素可拖动，必须把 draggable 属性设置为 true ： draggable=true>test draggable属性：设置元素是否可拖动。...true: 可以拖动 false: 禁止拖动 auto: 跟随浏览器定义是否可以拖动在HTML5标准中文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。...图片和链接按住鼠标左键选中，就可以拖放。文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。

8.3K2 1

拖放实现--兼容手机与pc端原

它的概念很简单：点击某个对象，并按住鼠标按钮不放，将鼠标移到到另一个区域，然后释放按钮将对象放到这里。拖放的基本概念很简单：创建一个绝对定位的元素，使其可以用鼠标移到。...;background:red">移动的div draggable" style="width:100px;height:100px;position.../libs/jquery/2.1.1/jquery.min.js"> 可以使用自定义事件来指示这几个事件的发生，让应用的其他部分与拖动功能进行交互。移动的div draggable box2" id="box2">移动的div

1.6K2 0

妙啊！纯 CSS 实现拼图游戏

利用 draggable 属性实现元素的拖拽基于上述第一点，如何让一个元素变得可以拖拽，这是最容易解决的。...="true"：设置了 draggable="true" 的元素，长按住鼠标即可拖动元素：这样，拖动的问题就解决了。...CodePen Demo -- HTML draggable Demo 实现元素从位置A到位置B的移动 OK，接下来的难点就在于，如何将元素从位置A移动到位置B。...首先，元素的移动不是通过 hover 触发的，而是需要通过拖到到特定位置，并且释放鼠标的拖动效果，实现元素的移动。并且，只有在特定的位置释放，元素才能移动。这又是怎么实现的呢？...利用事件的冒泡，我们可以让元素在拖拽的过程中，让触发器显示，并且通过鼠标释放后立即触发了触发器的 hover 事件，让元素从位置 A，移动到了位置 B，实在是妙不可言！

1.1K2 0

HTML 5 - draggable属性讲解

4、ondrop - 在一个拖动过程中，释放鼠标键时触发此事件 5、dataTransfer对象是事件对象的一个属性，用于从被拖拽元素相放置目标传递字符串格式的数据。...重点本想应用 draggable制作一个移动端的demo，但发现dataTransfer是鼠标事件的属性。...所以目前看来，如果想制作移动端的h5拖动应用，dataTransfer肯定是用不了了。而draggable在移动端貌似也没有起作用。...我个人感觉，dataTransfer和localStorage 很相似，都是在本地保存一些数据。不同之处在于，dataTransfer只用于从被拖拽元素向放置目标元素传递字符串格式的数据。...而localStorage 则完全是本地存储了，关于它的知识以后会讲到。另，关于这一块的知识，如果哪位同学有更多理解，欢迎留言。

1.7K5 0

前端day16-JS(WebApi)学习笔记（事件补充、事件冒泡与捕获）

-- img标签默认的draggable就是true，可以不用设置 --> <img src="....document.getElementById('box'); //1.拖拽开始 box.ondragstart = function () { console.log('鼠标按下并第一次移动...1.3-容器盒子事件跟容器相关的拖拽事件 ondragenter：有元素被拖拽到元素范围内就触发 ondragleave：有元素被拖离元素范围内就触发 ondragover：鼠标移动时...，元素在我的范围内就会触发（非常频繁） ondrop: 鼠标松开时，元素还在我的范围内就会触发 * 注意点：这个事件默认不会触发，需要配合ondragover使用 <!...container.ondragover = function(e){ e.preventDefault(); // console.log('鼠标移动时

2.1K0 0

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义...，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等...我还用了window load ((window).load()) 来激活我的插件功能，因为这样，就可以保证在页面对象全部加载完成之后，加载我的插件。...然后再使用 CSS 定义滚动条的样式，使用 Javascript 相应鼠标的滚动事件，产生滚动下滑的效果。明白了这点，下面我们就可以看一下滚动条的结构，然后使用 CSS 对其进行定义了。...关于更多的进阶使用和技巧，欢迎跟我交流，也可以关注本文，会在后面陆续添加。

16.6K3 0

JavaScript进阶之实现拖拽

当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。 JavaScript三大家族 ? ? 明白了上述?...一个典型的drag操作是这样开始的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标。...，此事件作用在目标元素上 ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上...是不是很接近我们的需求啦自定义拖动图像拖动过程中，浏览器会在鼠标旁显示一张默认图片。当然，应用程序也可以通过 setDragImage() 方法自定义一张图片，如下面的例子所示。...有 3 个效果可以定义： copy 表明被拖动的数据将从它原本的位置拷贝到目标的位置。 move 表明被拖动的数据将被移动。 link 表明在拖动源位置和目标位置之间将会创建一些关系表格或是连接。

3.2K4 0

html5鼠标拖动排序及resize实现方案分析及实践

之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现，更加方便（省去计坐标计算等）。...为了使元素可拖动，必须把 draggable 属性设置为 true ： draggable=true>test[object Object] 整个拖拽事件触发的顺序如下...这里，我暂时把被拖放的元素称为源对象，被经过的元素称为过程对象，到达的元素称为目标对象。不同的对象产生不同的拖放事件。...setDragImage(element,x,y) 该方法通过img元素来设置拖放图标 element表示拖拽时鼠标下面的图片（通常是image元素，也可以说canvas元素） x、y分别指示相对于图片的横向和纵向偏移量

3.9K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭