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

如何在动态创建的元素(img div)中添加ondragstart="drag(event)“?

在动态创建的元素中添加ondragstart="drag(event)"可以通过以下步骤实现:

  1. 创建元素:使用JavaScript的createElement方法创建需要的元素,例如imgdiv
  2. 设置元素属性:使用setAttribute方法为元素设置ondragstart属性,并将其值设置为drag(event)。这将指定在拖动开始时调用名为drag的函数,并将事件对象event作为参数传递给该函数。
  3. 添加元素到文档:使用appendChild方法将创建的元素添加到文档中的适当位置,以便它能够在页面上显示和触发拖动事件。

以下是一个示例代码,演示如何在动态创建的img元素中添加ondragstart="drag(event)"

代码语言:javascript
复制
// 创建img元素
var imgElement = document.createElement('img');

// 设置元素属性
imgElement.setAttribute('ondragstart', 'drag(event)');

// 添加元素到文档
document.body.appendChild(imgElement);

请注意,上述代码仅演示了如何在动态创建的元素中添加ondragstart属性。drag(event)函数需要根据具体需求进行定义和实现,以便在拖动开始时执行相应的操作。

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

相关·内容

HTML5 拖放

="true" /> 2、设置要拖动的内容(ondragstart 和 setData()) 设置当元素被拖动时,要拖动的内容是什么;这里需要给要拖动的元素添加 ondragstart事件(当元素开始用鼠标拖动时...如下代码我们如果要将图片放置到另一个div容器中,需要设置这个div容器可以放置其他元素(给他添加ondragover 事件,ondragover 规定当我们拖动的元素经过它的时候,可以将拖动的元素放置到此处...我们要规定被拖动的元素需要放置的新位置,这里给div容器添加 ondrop 事件,如下代码: div id="div1" ondrop="drop(event)" ondragover="allowDrop...该方法将返回在 setData() 方法中设置为相同类型的数据 被拖元素数据 是被拖元素的 id ("drag1") 把被拖动图片元素 追加 到放置元素(目标元素)中 二、拖动一个图片到一个div容器中...ondragstart="drag(event)" id="drag1" height="100px" /> div> div id="div2" ondrop="drop(event)" ondragover

1.5K20
  • JavaScript 学习-50.实现页面菜单拖放(Drag 和 Drop)

    拖放(Drag 和 Drop) 在拖曳操作中,被拖曳的元素称做源对象,是指页面中设置了draggable=”true”属性的元素;源对象进入的元素称作目标元素,目标元素可以是页面的任一元素。...把元素设置为可拖放首先:为了把一个元素设置为可拖放,请把 draggable 属性设置为 true: img draggable="true"> 需要注意的是,图片和链接默认是可以拖曳的,它不用添加draggable...在上面的例子中,ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。...该方法将返回在 setData() 方法中设置为相同类型的任何数据 被拖数据是被拖元素的 id (“drag1”) 把被拖元素追加到放置元素中 使用示例 一个完整的拖曳效果是由拖曳(Drag)和释放(Drop...)组成的,在HTML 5中任何元素都能够实现拖曳操作,可以通过为元素添加属性draggable=’true’ 来实现, 在拖曳操作中,被拖曳的元素称做源对象,是指页面中设置了draggable=”true

    1.3K20

    前端拾零02—H5拖放总结

    拖放总览 前端拖放,无非通过两种方式:1、js鼠标事件监听,动态改变坐标位置;2、H5原生api。随着H5的普及,推荐使用相对简单的H5原生api实现拖放功能。.../src/img/logo.png" draggable="true" ondragstart="dragstart(event)" ondrag="drag(event)" ondragend="dragend...("ondragstart 拖动开始"); } function drag(event) { console.log("ondrag持续拖动"); } function dragend(event)...(); // 保存在dataTransfer对象中的数据只能在drop事件处理程序中读取 var dt = event.dataTransfer; var data = dt.getData("csxiaoyaoData...Event.dataTransfer Event.dataTransfer: 拖放对象数据传递媒介,保存在dataTransfer对象中的数据只能在drop事件处理程序中读取 Event.dataTransfer.dropEffect

    4.2K730

    前端拾零02—H5原生拖放总结 【原创】

    拖放总览 前端拖放,无非通过两种方式:1、js鼠标事件监听,动态改变坐标位置;2、H5原生api。随着H5的普及,推荐使用相对简单的H5原生api实现拖放功能。.../src/img/logo.png" draggable="true" ondragstart="dragstart(event)" ondrag="drag(event)" ondragend="dragend...("ondragstart 拖动开始"); } function drag(event) { console.log("ondrag持续拖动"); } function dragend(event...foxfire下弹出新窗口 event.stopPropagation(); // 保存在dataTransfer对象中的数据只能在drop事件处理程序中读取 var dt =...Event.dataTransfer Event.dataTransfer: 拖放对象数据传递媒介,保存在dataTransfer对象中的数据只能在drop事件处理程序中读取 Event.dataTransfer.dropEffect

    1.9K20

    HTML5 的拖放(实例:两个div之间拖放图片)

    重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover...默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。...该方法将返回在 setData() 方法中设置为相同类型的任何数据。 被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素(目标元素)中 结果----》 拖动前 ? 拖动后 ?...id="div1" ondrop="drop(event)" ondragover="allowDrag(event)"> img src="1.jpg" width="120px..." height="50px" draggable="true" ondragstart="drag(event)" id="drag1" /> div> div

    2.2K10

    H5拖放原生js将图片拖放另外一个元素里

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2:元素的可拖放 draggable 属性设置为 true img draggable=”true”> 3:元素中的拖放事件 通过拖放事件...拖动某些元素时,将一次触发下列事件:ondragstart、ondrag、ondragend。 按下鼠标键并开始移动鼠标时,会在被拖放的元素上触发dragstart事件。...触发dragstart事件后,随即会触发drag事件,而且在元素被拖动期间会持续发送该事件。 当拖动停止时(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发dragend事件。...("URL","http://blog.csdn.net/zhaohaixin0418"); 5:event.preventDefault() 默认地,无法将数据/元素放置到其他元素中。...div分别添加ondragleave事件。

    2.1K30

    JavaScript进阶之实现拖拽

    HTML 拖放(Drag and Drop) 拖拽事件 HTML 的 drag & drop 使用了 DOM event model 以及从mouse events 继承而来的 drag events...一个典型的drag操作是这样开始的:用户用鼠标选中一个可拖动的(draggable)元素,移动鼠标到一个可放置的(droppable)元素,然后释放鼠标。...drag: 拖拽源 drop:拖拽源最终放置的目标 DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。...draggable 属性:就是标签元素要设置draggable=true ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件...定义拖动效果 dropEffect 属性用来控制拖放操作中用户给予的反馈。它会影响到拖动过程中浏览器显示的鼠标样式。比如,当用户悬停在目标元素上的时候,浏览器鼠标也许要反映拖放操作的类型。

    2.7K40

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

    在这一篇文章中,我们再来优化一下我们的项目,我们给我的看板页面添加一个拖拽功能 这篇内容不是很懂,有点水,弄懂再来改 知识点抢先看 给看板添加拖拽功能 讲解 HTML5 中的 drop 和 drag...在 HTML5 中新增的 Drop 和 Drag 当我们需要设置某个元素可拖放时,只需要 draggable 设置为 true img draggable="true"> 当拖放执行时,会发生 ondragstart...和 setData() 执行 ondragstart 会调用一个函数 drag 函数,它规定了被拖拽的数据 function drag(event) { event.dataTransfer.setData...("Text",ev.target.id); } 这里的 Text 时我们需要添加到 drag object 中的数据类型 在何处放置被拖动的数据 默认地,无法将数据/元素放置到其他元素中。...被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素(目标元素)中 (参考于菜鸟教程) 可以亲自试一试:在线演示 总结 大概了解了一下如何使用 react-beautiful-dnd

    63030

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

    为了使元素可拖动,必须把 draggable 属性设置为 true :div id=test draggable=true>testdiv>draggable属性:设置元素是否可拖动。...,被拖拽对象离开目标对象时触发拖动事件列表每一个可拖动的元素,在拖动过程中,都会经历三个过程,拖动开始-->拖动过程中--> 拖动结束在拖动目标上触发事件 (源元素-被拖动的元素):ondragstart...void setDragImage(img, xOffset, yOffset)指定一副图像,当拖动发生时,显示在光标下方。大多数情况下不用设置,因为被拖动的节点被创建成默认图片。...从拖动目标(dragstart事件触发的元素)生成半透明图像,并在拖动过程中跟随鼠标指针。这个图片是自动创建的,你不需要自己去创建它。...New data can be added to the drag data store.读/写模式,在dragstart事件中使用,可以添加新数据到drag data store中。

    6.4K21

    12.HTML5下一代的HTML标准介绍与初识尝试

    学习这些新的元素和特性,可以使你的网页更加现代化和丰富。 4.学习JavaScript:HTML5和JavaScript紧密结合,JavaScript可以为网页添加交互和动态效果。...3.建议尽量闭合的HTML元素,在 HTML5 中你不一定要关闭所有元素 (例如 元素),但我们建议每个元素都要添加关闭标签。...流程思路 设置元素为可拖放首先,为了使元素可拖动,把 draggable 属性设置为 true :img draggable="true" /> 拖动什么 -> ondragstart (事件)和...在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据,dataTransfer.setData() 方法设置被拖数据的数据类型和值: function...drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } 在这个例子中,数据类型是 "Text" 值是可拖动元素的 id ("drag1"

    34920

    基于自然流布局的可视化拖拽搭建平台设计方案

    基于自然流布局实现拖拽生成页面 自然流布局的好处就是我们不用通过定位的方式来限定元素的位置等信息, 而是以html文档流的方式来布局元素, 并且用户可以灵活的设置元素的层级(layer)和偏移(transform...首先我们来看看一个完整的拖放过程: 首先要设置一个元素可拖放(比如img draggable="true" />) 设计拖动的时候会发生什么(需要用到ondragstart事件 和 setData(你要传递的数据...id="box" ondrop="drop(event)" ondragover="allowDrop(event)">div> img id="drag" src="dooring.png"...draggable="true" ondragstart="drag(event)" width="336" height="69" /> 也就是对应的我们的组件拖放区域, 如下图所示: ?...关于如何设计一个动态的属性编辑器, 笔者之前文章中也就详细的介绍, 大家可以参考: 表单编辑器实现(FormEditor) 以上就是自然流布局的基本实现方式, 后续笔者也会在github上同步我们最新的成果

    1.9K30
    领券