首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

拖放DOM创建的项目会返回'null‘

拖放DOM创建的项目会返回'null'是因为在拖放操作中,通常会使用document.createElement()方法来创建一个DOM元素,并将其作为拖动的副本。然后使用event.dataTransfer.setData()方法将该副本数据传递给拖放目标。

但是,由于document.createElement()方法只是创建了一个DOM元素,并没有将其添加到文档中,所以在没有将其插入到任何位置之前,尝试访问该元素会返回null

以下是解决该问题的一种可能的方法:

  1. 创建一个空的目标元素,可以使用document.createElement()方法来创建一个空的目标元素,例如<div><span>
  2. 将拖动的副本添加到目标元素中,可以使用appendChild()方法将副本添加到目标元素中。
  3. 在目标元素的适当位置处理拖放操作,例如dragoverdrop事件。

下面是一个示例代码片段,展示了如何处理拖放操作并避免返回'null'的问题:

代码语言:txt
复制
// 创建一个空的目标元素
var targetElement = document.createElement('div');

// 处理拖放操作
targetElement.addEventListener('dragover', function(event) {
  event.preventDefault();
});

targetElement.addEventListener('drop', function(event) {
  event.preventDefault();

  // 获取拖动的数据
  var draggedData = event.dataTransfer.getData('text/plain');

  // 创建拖动的副本并添加到目标元素中
  var draggedElement = document.createElement('div');
  draggedElement.textContent = draggedData;
  targetElement.appendChild(draggedElement);
});

在上述示例中,我们创建了一个空的目标元素<div>,并在dragoverdrop事件处理函数中处理拖放操作。在drop事件处理函数中,我们使用createElement()方法创建一个带有拖动数据的副本,并通过appendChild()方法将其添加到目标元素中。

关于云计算、IT互联网领域的名词词汇和推荐的腾讯云产品,根据提供的内容范围,无法与此问题直接关联。如果您有任何其他问题或需要进一步的帮助,请随时告诉我。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

dragula插件web端和移动端的拖拽排序

Dragula简介 Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单,浏览器兼容性好,能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。...如果该方法返回的是false,拖拽事件将不会开始,事件也不会被阻止。...sibling元素可以为null,这会使元素被放置到容器的最后一个位置。注意:如果options.copy设置为true,el元素会被设置为一个副本,替代原始的拖放元素。...注意下面的区别: 1. drag 元素从source中隐藏 Nothing happens 2. drop 元素将移动到target中 元素会被克隆到target中 3. remove 元素会从DOM...设置revertOnSpill为true将确保元素在拖放到容器之外时会被重新放置会拖放的开始位置。

2.4K10
  • 你不知道的33个令人惊艳的React开发库

    react-select image.png 一个灵活且美观的 ReactJS 选择输入控件,具有多选、自动完成、异步和可创建的支持。...react-icons image.png 使用react-icons可以轻松地在React项目中使用流行的图标,它利用ES6导入,支持按需打包。...专注于重要的事情! react-drag-drop-files image.png 轻量且简单的 Reactjs 拖放文件库,可使用非常灵活的更改选项,因此您可以为拖放区域放置任何您想要的设计。...您可以更改图像的宽度、高度、格式、旋转和质量。它返回调整大小后的图像的新 base64 URI 或 Blob。URI 可以用作组件的源。...storybook image.png Storybook 是一个用于独立构建 UI 组件和页面的前端研讨会。成千上万的团队使用它进行 UI 开发、测试和文档编制。它是开源且免费的。

    35320

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

    该属性用于保存拖放的数据和交互信息,返回DataTransfer对象。DataTransfer对象定义的属性和方法有很多种,我们看下列入标准的几个。属性说明types只读属性。...大多数情况下不用设置,因为被拖动的节点被创建成默认图片。.../uri-list注:如果给定类型的数据不存在,则将其添加到拖动数据存储的末尾,使得dataTransfer.types列表中的最后一个项目将是新类型。...从拖动目标(dragstart事件触发的元素)生成半透明图像,并在拖动过程中跟随鼠标指针。这个图片是自动创建的,你不需要自己去创建它。...画布元素位置与尺寸调整可以先回顾下《再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX》如果使用mouse事件控制,就显得非常复杂。

    6.4K21

    15 个有趣的 JS 和 CSS 库

    项目地址:https://github.com/fastify/fastify 4.Draggable Draggable 是一个轻量级、响应式的 JS 拖放库,由 Shopify 出品。...它提供了高级的拖放功能,能够快速进行 DOM 重新排序,并且拥有清晰的 API 和访问标记。同时,它也附带了一些额外的模块,便于你进行扩展。...Words To Numbers 是一个有趣的 JS 库,它能够识别单词并转化为数字。如果传递的字符串为数字,它就会返回相应的数值,否则它将返回初识字符串。...它提供了电子邮件发送与管理的众多功能,例如发送无限制容量大小的电子邮件,导入 CSV 格式的电子邮件,创建模板,以及追踪邮件跳出率等。...项目地址:http://emersonthompson.com.br/zoomove/ 15.Scrollanim ? Scrollanim 是一个用于创建滚动动画的轻量级 CSS3 + JS 库。

    2.9K71

    JavaScript进阶之实现拖拽

    最近做到的react项目就有一个拖拽的需求,然后大概搜索了一下,找到了star比较高的react-dnd库,但是阅读react-dnd的官方文档还是有点难受的,因为概念性比较强,所以在介绍react-dnd...会在我们拖放时自动运行,这与我们的拖放处理产生了冲突。...HTML 拖放(Drag and Drop) 拖拽事件 HTML 的 drag & drop 使用了 DOM event model 以及从mouse events 继承而来的 drag events...定义拖动效果 dropEffect 属性用来控制拖放操作中用户给予的反馈。它会影响到拖动过程中浏览器显示的鼠标样式。比如,当用户悬停在目标元素上的时候,浏览器鼠标也许要反映拖放操作的类型。...有 3 个效果可以定义: copy 表明被拖动的数据将从它原本的位置拷贝到目标的位置。 move 表明被拖动的数据将被移动。 link 表明在拖动源位置和目标位置之间将会创建一些关系表格或是连接。

    2.7K40

    web前端常见面试题总结

    Js的typeof返回哪些数据类型?...,在外部函数被调 用之后,闭包结构依然保>存在; 对页面的影响:使用闭包会占有内存资源,过多的使用闭包会导致内存溢出等。...2、created:实例已经创建,仍然不能获取DOM节点(有data,没有el) 使用场景:模板渲染成html前调用,此时可以获取data和methods,可以初始化某些属性值,然后再渲染成视图,...异步操作可以放在这里 二、载入 1、beforeMount:是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el) 2、mounted:数据和DOM...modules 项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。 route和router的区别是?

    1.5K20

    js高级技巧_JavaScript高级程序

    this并非Polygon的实例,所以会创建并返回一个新的Polygon对象,并没有实际作用,this得不到增长,所以Rectangle实例中不会有sides属性。...函数柯里化 用于创建已经设置好了一个或多个参数的函数。 其基本方法和函数绑定是一样的:使用一个闭包返回一个函数。 二者区别在于:当函数被调用时,返回的函数还需设置一些传入的参数。.../** * @array 要处理的项目的数组 * @process 处理项目的函数 * @context 运行函数的环境 */ function chunk(array, process, context...节流处理 在浏览器中,处理DOM交互需要更多的内存和CUP时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起,甚至崩溃。...拖放的基本概念:创建一个绝对定位的元素,使其可以用鼠标移动。 <!

    4K21

    JavaScript高级技巧

    this并非Polygon的实例,所以会创建并返回一个新的Polygon对象,并没有实际作用,this得不到增长,所以Rectangle实例中不会有sides属性。...函数柯里化 用于创建已经设置好了一个或多个参数的函数。 其基本方法和函数绑定是一样的:使用一个闭包返回一个函数。 二者区别在于:当函数被调用时,返回的函数还需设置一些传入的参数。.../** * @array 要处理的项目的数组 * @process 处理项目的函数 * @context 运行函数的环境 */ function chunk(array, process, context...节流处理 在浏览器中,处理DOM交互需要更多的内存和CUP时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起,甚至崩溃。...五、拖放 点击某个对象,并按住鼠标按钮不放,将鼠标移动到另一个区域,然后释放鼠标按钮将对象“放”在这里。 拖放的基本概念:创建一个绝对定位的元素,使其可以用鼠标移动。 <!

    1.1K51

    HTML5 - 拖放

    前言 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在H5中,任何元素都支持拖放,但是需要注意的是,有些元素存有默认行为(如a元素),应当取消该元素的默认行为。...使用 preventDefault() 取消事件的默认动作 拖放事件 拖动元素-事件: 事件 描述 ondragstart 当元素开始被拖动时触发——开始拖动 ondrag 拖动源触发——正在拖动...dataTransfer对象 属性/方法 描述 files 其属性返回和放置相关的所有文件 types 属性使用数组的形式返回当前注册的格式 effectAllowed 此属性通知浏览器当前可被用户选用的操作...dropEffect 拖放的操作类型,决定了浏览器如何显示鼠标形状 items 属性返回所有项与相关格式的所有文件 setData(format,data) 在dragstart事件调用此函数在dataTransfer...){ console.log('结束拖动') } 开始拖动——正在拖动——放下 此时,控制台打印结果如下: demo 在进行拖放操作的时候

    1.6K10

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

    而HTML5中直接提供了拖放的API,只要通过监听元素的拖放事件就能实现各种拖放功能。 拖放(Drag和 drop)是 HTML5 标准的组成部分。...这里,我暂时把被拖放的元素称为源对象,被经过的元素称为过程对象,到达的元素称为目标对象。不同的对象产生不同的拖放事件。...text/uri-list 注:如果给定类型的数据不存在,则将其添加到拖动数据存储的末尾,使得dataTransfer.types列表中的最后一个项目将是新类型。...files属性 返回被拖拽的文件列表,是一个FileList对象,有length属性,可通过下标访问。此功能可用于将文件从用户桌面拖动到浏览器。一般配合FileReader来处理文件。...画布元素位置与尺寸调整 可以先回顾下《再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX》 如果使用mouse事件控制,就显得非常复杂。

    3.1K10

    vue-grid-layout数据可视化图表面板优化过程所遇问题汇总

    对于drag事件不熟悉的,请先阅读:《drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践》之前老项目grafana面板,如下图所示(GEM添加图表是直接到图表编辑,编辑完成后自动插入到面板最后...:其实很多初级的前端同学只知道JS改变CSS会让浏览器回流,其实JS读取某些属性也会让浏览器回流,比如js请求以下style信息时,触发回流(浏览器会立刻清空队列:)clientWidth、clientHeight...https://html.spec.whatwg.org/multipage/dnd.html#drag-data-store这样就可以解释为什么dragover中dataTransfer.getData()返回的数据为空...dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此,我们必须阻止浏览器这种默认行为。...(6):dom对象及event对象位值计算—如offsetX/Top,clentX》clientX、clientY:点击位置距离当前body可视区域的x,y坐标pageX、pageY:对于整个页面来说,

    1.6K30

    Web前端事件

    事件与事件流 事件是与浏览器或文档交互的瞬间,如点击按钮,填写表格等,它是JS与HTML之间交互的桥梁。DOM是树形结构,若同时给父子结点绑定了相同的事件,那么他们的执行顺序是什么样子的呢?...[image.jpg] 事件捕获阶段为事件的触发奠定了基础,当DOM事件发生的时候,首先由最不具体的window结点向下捕获那个具象元素(触发事件的元素),事件捕获之后就开始执行绑定在上面的函数;当函数执行完毕...var btn = document.getElementById("btn"); btn.onclick = fun; 移除事件 btn.onclick = null; DOM2级事件 DOM2...ondragend 在拖动操作末端运行的脚本 ondragenter 当元素元素已被拖动到有效拖放区域时运行的脚本。 ondragleave 当元素离开有效拖放目标时运行的脚本。...ondragover 当元素在有效拖放目标上正在被拖动时运行的脚本 ondragstart 在拖动操作开端运行的脚本 ondrop 当被拖元素正在被拖放时运行的脚本 onmousewheel 当鼠标滚轮正在被滚动时运行的脚本

    3.3K00

    HTML中拖放介绍

    但是这里的拖放和iphone上的触摸(touch)滑动还不完全一样,这里的拖放可能是用鼠标操作,但是触摸滑动主要是通过手指之类的。...Web拖放发展历史 第一阶段: 因为HTML和DOM可以处理底层的鼠标事件,所以早起的开发人员可以借助Javascript和CSS,DOM事件基础,可以近似实现一个简单的拖放功能。...mouseup 释放鼠标按键,可能会触发放置操作 基于鼠标起始位置,是否放置在此位置 弊端: 1.需要考虑边界,而已需要提示哪里位置可以放置元素 2.不能将自己的页面的元素与其他页面,或者窗口、浏览器中其他内容合并或者交互...3.无法与用户的桌面交互,也无法跨浏览器窗口 第二阶段: 大家觉得用DOM和Javascript事件处理拖放操作很复杂,所以就有很多公司使用Flash去完成这个任务。...而已标准中提供了拖放的API,所以越来越多的公司关注HTML5中拖放操作。看一个Skydrive上传文件的示例和Dropbox上传文件的示例。

    3.1K100

    React DnD

    不像其它库一样提供无穷尽的Draggable Component应对常见业务场景,React DnD从相对底层的角度提供支持,是对拖放能力的抽象与封装,通过抽象来简化使用,通过封装来屏蔽下层差异 二.术语概念...Item和Type Item是对元素/组件的抽象理解,拖放的对象不是DOM元素或React组件,而是特定数据模型(Item): An item is a plain JavaScript object...Type作为萝卜(drag source)和坑(drop target)的匹配依据,相当于经典DnD库的group name Monitor Monitor是拖放状态的集合,比如拖放操作是否正在进行,是的话萝卜是哪个坑是哪个...见下文核心实现部分 Connector Connector用来建立DOM抽象(React)与DnD Backend需要的具体DOM元素之间的联系: The connectors let you assign...,看起来同样很自然 4.定制DragPreview 浏览器DnD默认会根据被拖动的元素创建drag preview(一般像个半透明截图),需要定制的话,与DragSource的创建方式类似: function

    1.5K30

    Jquery 使用技巧总结

    元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。...对象,而get (n)和索引返回的是dom元素对象。...当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over,离开时置为out。...可以有多个参数(合并多项并返回) $.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。...i + 1 : null; }); tempArr内容为:[2,3] $.merge(arr1,arr2):合并两个数组并删除其中重复的项目。

    2.9K20

    滴滴前端一面必会面试题(附答案)

    在一个项目中,在用户邮箱验证码登录的功能时,使用到了这个协议。(2)表示层表示层提供各种用于应用层数据的编码和转换功能,确保一个系统的应用层发送的数据能被另一个系统的应用层识别。...其他拖放:拖放是一种常见的特性,即抓取对象以后拖到另一个位置。...其实,大家说的都对。不管是函数返回一个函数,还是产生了外部作用域的引用,都是有道理的。所以,什么是闭包?解释一下作用域链是如何产生的。解释一下js执行上下文的创建、执行过程。...} // 子数组进行递归操作 vnode.children.forEach((child) => dom.appendChild(_render(child))); return dom;}哪些情况会导致内存泄漏...假如对比 x 和 y 是否相同,就会进行如下判断流程:首先会判断两者类型是否相同,相同的话就比较两者的大小;类型不相同的话,就会进行类型转换;会先判断是否在对比 null 和 undefined,是的话就会返回

    61350

    《javascript高级程序设计》核心知识总结

    ,[this]) 2.some 对数组中每一项运行给定函数,如果函数对任一项都返回true,则返回true 3.filter 对数组中每一项运行给定函数,返回该函数会返回true的项组成的数组 4.forEach...() 十一.DOM扩展 1.选择符 querySelector() // 参数为css选择符,返回与该模式匹配的第一个元素,没有找到返回null querySelectorAll() // 返回所有匹配的元素...//始终会引用dom中获得焦点的元素,文档刚刚加载完成时,保存的是document.body元素的引用,文档加载期间的值为null 2.document.hasFocus() //用于确定文档是否获得了焦点...// 例子 parentEl.contains(childEl); // 如果childEl是parentEl的后代,则返回true 十二.DOM2和DOM3 1.框架的变化 // 访问内联框架的文档对象....原生拖放 原生拖放请参考MDN,写的很详细 3.自定义媒体播放 // 使用video,audio元素的play()和pause()方法,可以手工控制媒体的播放 // 根据媒体元素的属性,我们可以自己实现一个视频

    2.4K20
    领券