jQuery UI - draggable/droppable dataTransfer未定义 - 腾讯云开发者社区

文章/答案/技术大牛

发布

jQuery ui中sortable draggable droppable的使用

最近工作中用到了jQuery UI中排序和拖拽功能，花了大概一天的时间，搞清楚了大概的参数配置，以及遇到的一些问题，总结如下。...)元素"经过"一个放置（droppable）对象 drop: function( event, ui ) { // $(this) 填充到的元素...// ui.draggable.context 填充的元素 let dragId = $(ui.draggable.context).attr('id');...("destroy"); }, 参考链接 https://www.html.cn/jquery-ui-api/sortable/ https://www.html.cn/jquery-ui-api/draggable.../ https://www.html.cn/jquery-ui-api/droppable

2.8K1 0

使用jQuery UI的draggable和droppable完成拖拽功能--介绍

项目中主要使用到jQuery UI里面的draggable和droppable，因为很多老的浏览器都不值html5的drag api。...我自己也没有去查看zTree的源代码，所以也不知道zTree底层拖拽实现是否也是使用了jQuery UI的draggable和droppable方法。...第三部分--方案思路： 1.了解jQuery draggable和droppable方法和工作原理 2.递归思想 3.各个击破 4.熟练使用jQuery操作dom结构第四部分--参考网址： 1.http...://www.ztree.me/v3/main.php 2.http://jqueryui.com/draggable/ 3.http://jqueryui.com/droppable/

2.6K5 0

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

是的

没有找到

使用jQuery Draggable和Droppable实现拖拽功能

第一步：左侧元素可以拖官方给出的实例是直接在要拖动的元素上添加class="ui-widget-content"。最初我是在所有要拖动的元素都添加了“ui-widget-content”类别。...效果如下图所示: 因为最终的左侧元素节点是通过Ajax访问后台返回json数据，然后通过Javascript动态生成这种结构，而已不能为动态生成的元素绑定drag事件，也就不能调用draggable方法...javascript"> $("#draggableDiv").draggable({ containment: "parent", drag...完成代码之后的效果图如下：代码下载：http://files.cnblogs.com/liminjun88/DragandDrop.rar 参考网址： http://jqueryui.com/droppable.../ http://jqueryui.com/draggable/

3.2K6 0

JavaScript学习笔记（五）——Ajax

好用的jQuery插件： 1. jQuery Form插件 jQuery Form是一个优秀的表单插件，它可以非常容易地使HTML表单支持Ajax。...文档及下载地址 2. jQuery UI插件 jQueryUI 插件是一个基于 jQuery 的用户界面开发，该库提供了UI控件。...鼠标拖拽页面板块只需要分别在拖拽源和目标上调用 draggable() 函数即可。实现拖入购物车功能 droppable()方法实现接收容器。... $(function () { $(".draggable").draggable({ helper: "clone"...}); $("#droppable-accept").droppable({ accept: function (draggable) { return $(draggable)

2.4K1 0

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

通过拖放 API，我们可以实现将可拖拽（draggable）元素拖动到另一个可放置（droppable）元素，以及实现交互式的拖放体验。...「定义可放置的（droppable）元素」：将用来放置被拖动元素的目标区元素标记为可放置，并指定相应的事件处理逻辑。...当拖动图片时，我们使用 dragstart 事件将图片的 ID 存储在 dataTransfer 对象中。...">任务 1 draggable="true">任务 2 draggable="true">任务...No jQuery or framework required. dragula[8]: 21.6kk⭐，简化拖放操作的 JavaScript 库，浏览器支持包括所有常用浏览器和**IE7+**，框架支持包括

8802 0

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

“拖拽”实现关键词就是“拖拽”，其实“拖拽”的交互方式早在 Jquery 时代就有，关于拖拽在前端实现主要分为 2 种是以 jquery-ui 为代表的 draggable 和 Droppable...("application/my-app", ev.target.id); ev.dataTransfer.effectAllowed = "move"; } function dragover_handler...(ev) { ev.preventDefault(); ev.dataTransfer.dropEffect = "move" } function drop_handler(ev) { ev.preventDefault...(document.getElementById(data)); } draggable="true" ondragstart="dragstart_handler...(event)">This element is draggable.

6.7K2 0

Hooks + TS 搭建一个任务管理系统（八）-- 拖拽功能实现

添加一个拖拽功能实现效果像这样我们实现这个功能采用了一个 react-beautiful-dnd 的库，关于这个库可以查看： npm官网关于这个库的使用呢，我们简单的介绍一下，首先我们需要定义一个 Droppable...& { children: ReactNode } export const Drop = ({ children, ...props }: DropProps) => { return Droppable...}) } return }) } Droppable...在 HTML5 中新增的 Drop 和 Drag 当我们需要设置某个元素可拖放时，只需要 draggable 设置为 true draggable="true"> 当拖放执行时，会发生 ondragstart...和 setData() 执行 ondragstart 会调用一个函数 drag 函数，它规定了被拖拽的数据 function drag(event) { event.dataTransfer.setData

7353 0

treetable php,jQuery树型表格插件jQuery treetable

插件描述：jQuery-treetable是一个jQuery插件。有了这个插件，你可以在一个HTML表格中显示树，即目录结构或嵌套列表。...selected”); }); // Drag & Drop Example Code $(“#example-advanced .file, #example-advanced .folder”).draggable...revertDuration: 300, scroll: true }); $(“#example-advanced .folder”).each(function() { $(this).parents(“tr”).droppable...({ accept: “.file, .folder”, drop: function(e, ui) { var droppedEl = ui.draggable.parents(“tr”); $(...) { var droppedEl = ui.draggable.parents(“tr”); if(this !

2.2K3 0

HTML中拖放介绍

1.在jQuery UI里面会经常使用Draggable和Droppable，实现Web开发中拖放效果，当然这不是原生条的拖放，所以在处理复杂的拖放上还是需要自己动手写很多代码，最近开发中就遇到这个问题...没有具体开发过mobile web应用，不知道jQuery UI的draggable和droppable是否支持手机上的触摸操作。

3.6K10 0

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-20- 操作鼠标拖拽 - 上篇（详细教程）

/default.html"); //4.开始拖拽 page.locator("#draggable").dragTo(page.locator("#droppable.../default.html"); //4.开始拖拽 //page.locator("#draggable").dragTo(page.locator("#droppable...")); page.dragAndDrop("#draggable", "#droppable"); System.out.println("Test...")); //page.dragAndDrop("#draggable", "#droppable"); page.locator("#draggable").hover...如下图所示：4.小结宏哥由于网络的原因，有时可以访问到jquery UI的网页的demo，有时又不可以，在网上找了半天给小伙伴们或者童鞋们又找到一个网址：https://sahitest.com/demo

2611 0

彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

---- 二、基于HTML5拖拽API的拖拽前序知识介绍一个典型的拖拽操作是这样的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标...： var value2 = ev.dataTransfer.getData(key); 兼容性 ?...="true">1 draggable="true">2 draggable="true">3 draggable="true">4... draggable="true">5 <div id="thatDiv

3.7K3 0

前端里的拖拖拽拽了解一下？

而元素是否允许被拖放且可响应 API 操作依赖于 draggable[2] 全局标签属性 draggable 是一个布尔值类型的标签属性： true：元素可被拖拽 false：元素不可拖拽当元素设置了...一个典型的拖拽操作：用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标按住不放）至一个可放置的（droppable）元素上，然后松开鼠标。...这就涉及到 DataTransfer 对象： DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。...—— DataTransfer - MDN[3] DataTransfer 对象在不同浏览器上因为标准可能不一样使得 API 有差异，但有几个“标准（常用）”属性和方法需要熟悉在 Chrome 浏览器上的.../en-US/docs/Web/HTML/Global_attributes/draggable [3]DataTransfer - MDN: https://developer.mozilla.org

5.7K3 0

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

之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现，更加方便（省去计坐标计算等）。...为了使元素可拖动，必须把 draggable 属性设置为 true ： draggable=true>test[object Object] 整个拖拽事件触发的顺序如下...getData(format) 该方法从dataTransfer对象中读取数据，参数为在setData方法中指定的数据类型，例如：event.dataTransfer.getData('text/plain...dataTransfer属性 dropEffect 和 effectAllowed属性给指定拖放操作所允许的一个效果，例如：dataTransfer.effectAllowed = "move"。

3.5K1 0

《最新出炉》系列初窥篇-Python+Playwright自动化测试-18-处理鼠标拖拽-上篇

/default.html") page.wait_for_timeout(1000) page.locator("#draggable").drag_to(page.locator("#droppable.../default.html") page.wait_for_timeout(1000) # page.locator("#draggable").drag_to(page.locator("...#droppable")) page.drag_and_drop('#draggable', '#droppable') page.wait_for_timeout(3000) # page.pause.../default.html") page.wait_for_timeout(1000) page.locator('#draggable').hover() page.mouse.down...如下图所示：图片4.小结宏哥由于网络的原因，有时可以访问到jquery UI的网页的demo，有时又不可以，在网上找了半天给小伙伴们或者童鞋们又找到一个网址：https://sahitest.com/demo

10.8K5 0

JavaScript进阶之实现拖拽

一个典型的drag操作是这样开始的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标。...drag: 拖拽源 drop：拖拽源最终放置的目标 DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。...draggable 属性：就是标签元素要设置draggable=true ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件...color: rgb(96, 96, 96); } <li draggable...dragstart_handler(ev) { var img = new Image(); img.src = 'https://js.cx/clipart/ball.svg'; ev.dataTransfer.setDragImage

2.9K4 0

700美金的WordPress Dos漏洞CVE-2018-6389分析

,jquery-ui-button,jquery-ui-datepicker,jquery-ui-dialog,jquery-ui-draggable,jquery-ui-droppable,jquery-ui-menu...,jquery-ui-mouse,jquery-ui-position,jquery-ui-progressbar,jquery-ui-resizable,jquery-ui-selectable,jquery-ui-selectmenu...,jquery-ui-slider,jquery-ui-sortable,jquery-ui-spinner,jquery-ui-tabs,jquery-ui-tooltip,jquery-ui-widget...,jquery-ui-button,jquery-ui-datepicker,jquery-ui-dialog,jquery-ui-draggable,jquery-ui-droppable,jquery-ui-menu...,jquery-ui-slider,jquery-ui-sortable,jquery-ui-spinner,jquery-ui-tabs,jquery-ui-tooltip,jquery-ui-widget

1.5K1 0

ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-工作流设计-表单布局

基本纯UI,但是不是很复杂有了实现表单的打印和更加符合流程表单方式，我们必须自定义布局来适合业务场景打印！我们想要什么效果？看下图（我们没有布局之前的表单和设置布局后的表单） ?...本节知识点： easyui draggable 与 resizable 的结合使用（拖动与设置大小）在Form添加Action Action提取来自48节的Create代码。...GetPermission(); ViewBag.Html = ExceHtmlJs(id); return View(); } UI...代码提取：jquery-easyui-1.4.3\demo\droppable 与resizable 文件下的代码提取后代码：我自己加了点Style FormLayout.cshtml draggable').draggable({ edge: 5 }).resizable(); 边框位置5px内都可以做为设置大小的边界运行结果：任意拖动位置 ?

9979 0

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

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

7.1K2 1

低代码开发的协同之道：拖拽UI、规则引擎与扩展钩子的深度剖析

拖拽式UI生成器：快速构建用户界面先来介绍一下拖拽式UI生成器，它是低代码平台的核心功能之一，允许开发者通过简单的拖拽操作快速构建用户界面，个人觉得这种可视化开发方式大大降低了开发门槛，提高了开发效率，...拖拽式UI生成器通常提供以下功能：丰富的UI组件库：提供多种预定义的UI组件，如按钮、输入框、表格等。...{ DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; const components = [ { id:...> ))} {provided.placeholder} )} Droppable>..., Draggable } from 'react-beautiful-dnd'; class RuleEngine { constructor() { this.rules = [];

1762 1

【实战技巧】VUE3.0实现简易的可拖放列表排序

例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。...并阻止默认事件处理拖放数据拖放结束，添加 dragend 事件处理函数例子代码 draggable...在元素开始被拖动时触发 const handleDragstart = (ev) => { console.log(' ~ dragstart 触发啦'); ev.dataTransfer.setData...handleDrop = (ev) => { console.log(' ~ drop 触发啦'); ev.preventDefault(); const data = ev.dataTransfer.getData...dragstart中记录下旧的索引在dragover中记录下新的索引,每次经过一个都会更新在drop事件中处理数组,删掉旧的元素,在目标索引添加新的元素 //简略后的伪代码详情请查看源码 draggable

2.3K4 0

点击加载更多

jQuery ui中sortable draggable droppable的使用

使用jQuery UI的draggable和droppable完成拖拽功能--介绍

使用jQuery Draggable和Droppable实现拖拽功能

JavaScript学习笔记（五）——Ajax

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

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

Hooks + TS 搭建一个任务管理系统（八）-- 拖拽功能实现

treetable php,jQuery树型表格插件jQuery treetable

HTML中拖放介绍

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-20- 操作鼠标拖拽 - 上篇（详细教程）

彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

前端里的拖拖拽拽了解一下？

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

《最新出炉》系列初窥篇-Python+Playwright自动化测试-18-处理鼠标拖拽-上篇

JavaScript进阶之实现拖拽

700美金的WordPress Dos漏洞CVE-2018-6389分析

ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-工作流设计-表单布局

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

低代码开发的协同之道：拖拽UI、规则引擎与扩展钩子的深度剖析

【实战技巧】VUE3.0实现简易的可拖放列表排序

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐