jQuery UI - draggable/droppable dataTransfer未定义
jQuery UI - Draggable/Droppable DataTransfer 未定义
在jQuery UI中，draggable和droppable是用于实现拖放功能的基本组件。在浏览器支持DataTransfer API的情况下，这些组件可以正常工作并实现预期的拖放功能。
概念
- Draggable： 一个用于实现拖放功能的jQuery UI组件。
- Droppable： 一个也用于实现拖放功能的jQuery UI组件。
- DataTransfer： 在拖放操作期间保存与拖动相关的数据的对象。
分类
本问答将涉及以下方面：
- jQuery UI组件
- DataTransfer对象
优势
使用jQuery UI的draggable和droppable组件，开发者可以轻松地实现拖放功能，并自定义拖动和放置事件处理程序。此外，通过dataTransfer对象，可以在拖放操作期间保存与拖动相关的数据。
应用场景
jQuery UI的拖放功能适用于以下应用场景：
- 页面内元素拖放
- 页面间元素拖放
- 元素复制
- 元素移动
推荐的腾讯云相关产品
与jQuery UI的拖放功能相关的产品是腾讯云桌面客户端。腾讯云桌面客户端提供远程桌面、文件传输、屏幕投影等功能，支持Windows、macOS、Linux、iOS和Android系统，帮助用户实现跨平台的数据同步和操作。
产品介绍链接地址
腾讯云桌面客户端的官方网站是腾讯云官网，您可以在该网站上找到更多关于腾讯云桌面客户端的详细信息。
需要注意的是，本问答内容中提及的与jQuery UI的拖放功能相关的腾讯云桌面客户端产品，需要用户自行在腾讯云官网上注册并下载安装。
相关·内容
通过使用jQuery，它们是可拖动的。我需要设置一些与被拖动的item元素相关的数据，并能够在droppable元素的"drop“处理程序中从事件中提取它。我试图使用dataTransfer属性及其setData()函数，但该属性在双方都不可用。
下面是简单的示例：
浏览 2提问于2015-02-19得票数 3
回答已采纳
4回答
在Jquery中拖放事件
、、、、
我正在学习jQuery拖放UI，因为我面临着处理事件的问题，CSS：{ height: 100px;}{ left: 250px; width: 125px;
height/jquery-2.2.4.min.js"></
浏览 1提问于2016-06-08得票数 0
回答已采纳
我有一个div，上面有一个HTML可拖放的div，还有一个带有jquery可丢弃的容器。问题是当我拖动HTML，并通过可下拉式容器时，容器的可卸货不能工作。HTML
<div draggable="true" (dragstart)="handleDragStart($event)" (dragend)="handleDragEnd($event)"></div>
Jquery droppable的HTML：
浏览 0提问于2017-04-27得票数 1
UI Draggable - Default functionality</title> <script src="https://code.jquery.com/
浏览 1提问于2018-01-12得票数 1
回答已采纳
/jquery-1.12.4.js"></script> revert: true
$("
浏览 38提问于2016-07-29得票数 0
回答已采纳
我使用的是可拖放的JQuery UI。但看起来ui.droppable是未定义的。有人能帮帮我吗？这是我的代码： tolerance : "pointer", drop :function(event, ui) {
ui.dr
浏览 1提问于2015-03-15得票数 0
回答已采纳
box.addEventListener('drop', drop);}
tempParentContainer = e.target.parentNode; const id = e.dataTransfer.getData('text/plain');
const draggable = document.getElementByIdresource
浏览 22提问于2020-12-31得票数 0
我正在使用Jquery拖放，并且我想保留我正在拖放的元素的副本。$('.draggable').draggable({ stack: ".draggable"});$('.droppable').droppable({
accept: ".dra
浏览 3提问于2015-09-22得票数 10
回答已采纳
2回答
当我试图在删除jQuery UI之后销毁可拖放的文件时，我收到了它的错误。我使用的是jQuery 1.9.1和jQuery UI 1.10.0。脚本 revert: "invalid",});
浏览 3提问于2013-03-19得票数 4
回答已采纳
doctype html> <head> <title>jQuery UI Droppable -src="//code.jquery.com/ui/1.11.2/jquery-ui.js"><
浏览 1提问于2014-12-15得票数 0
我有一个很大的jQuery UI droppable，它被其他一些元素覆盖。当我将draggable悬停在实际遮蔽droppable的元素上时，droppable仍然接收ui-state-hover类。我们怎样才能避免这种情况？似乎没有机会实现droppable s.t的accept函数。它由光标坐标决定，至少我不能让它工作:如果它返回false一次，它不会被再次查询，直到光标重新进入模糊的droppable。
浏览 0提问于2015-10-20得票数 0
我试图实现一个简单的拖放，但由于某种原因，我存储在dataTransfer对象中的数据没有被保留。var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot"); background: blue; }
<script src="https://code.jquery</em
浏览 2提问于2022-01-18得票数 0
使用Jquery UI draggable。我的代码 $( ".box" ).droppable({ drop: function( event, ui ) { .addClass( &
浏览 0提问于2014-09-25得票数 0
4回答
然而，我不能让droppable在SVG elemnet上工作。有人知道为什么会这样吗？svg();svg.rect(20, 10, 100, 50, 10, 10, { fill: '#666', class: "droppable" }); .droppable({
accept: '.product
浏览 0提问于2012-09-13得票数 4
回答已采纳
1回答
各位，我使用的是jQuery UI，简单的带有可拖放选项的ol > Li操作。我的目标是允许用户将多个新类别和子类别拖到退出列表中。drop: function(event, ui) {
$('.list').append(ui.draggable.clone(true).detach().addClass('ui-droppableui-state-highlight
浏览 4提问于2021-08-11得票数 0
回答已采纳
1回答
GRIDSYSTEM accept: ".draaa", var offset = draggable.offset();
draggable.appendTo( this).offset( offs
浏览 1提问于2015-03-24得票数 3
1回答
我有一个又一个。两个div都有ondrop属性。当我移动子区域中的一个元素时，它会调用ondrop函数两次。给孩子一次，然后再给父母一次。你能帮我吗？
浏览 1提问于2016-12-23得票数 0
回答已采纳
下面是我的代码：$(function() { $(".ui-widget-content2").draggable(); drop: function(event, ui) {
if ($("div").hasClass(&q
浏览 2提问于2019-10-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
