首页
学习
活动
专区
工具
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 开发、测试和文档编制。它是开源且免费

    32520

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

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

    6.3K21

    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

    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

    HTML5 - 拖放

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

    1.5K10

    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

    web前端常见面试题总结

    Jstypeof返回哪些数据类型?...,在外部函数被调 用之后,闭包结构依然保>存在; 对页面的影响:使用闭包会占有内存资源,过多使用闭包导致内存溢出等。...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

    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,是的话就会返回

    58850

    开发人员必须了解 10 大前端开发工具

    React 可扩展性很值得注意,开发人员能很容易地完成需要修改大量数据大型项目。React 适应性很强,除了用于应用开发,用户也可将其应用于其他项目场景。...Vue.js 使用虚拟 DOM 功能来复制 DOM 内每个变化关键组件,并将这些变化复制到 JavaScript 数据结构中。...Webflow图片Webflow 也是一个深受前端开发者喜爱平台,现有超过 35 万名设计师正在使用该平台来创建和协作完成各种项目。...可视化前端开发工具有较好灵活性,这些工具往往提供一系列可视化组件和现成模板,还具备拖放功能,使应用程序开发过程变得更简单高效。此外,这类平台还允许开发人员根据业务需求添加自定义代码。...但是当应用程序发展到一定程度,与其他工具和系统进行了更多集成时,使用者范围也相应变广,开发者也得考虑多达 5000 个用户进行使用情形。

    1.9K51
    领券