首页
学习
活动
专区
工具
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 id="div2" ondrop="drop(event)" ondragover

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

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

    1.2K20

    前端拾零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

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

    在 HTML5 ,拖放是标准一部分,任何元素都能够拖放 2:元素可拖放 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 当拖放执行时,会发生 ondragstart...和 setData() 执行 ondragstart 会调用一个函数 drag 函数,它规定了被拖拽数据 function drag(event) { event.dataTransfer.setData...("Text",ev.target.id); } 这里 Text 时我们需要添加drag object 数据类型 在何处放置被拖动数据 默认地,无法将数据/元素放置到其他元素。...被拖数据是被拖元素 id ("drag1") 把被拖元素追加到放置元素(目标元素 (参考于菜鸟教程) 可以亲自试一试:在线演示 总结 大概了解了一下如何使用 react-beautiful-dnd

    61530

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

    为了使元素可拖动,必须把 draggable 属性设置为 true :testdraggable属性:设置元素是否可拖动。...,被拖拽对象离开目标对象时触发拖动事件列表每一个可拖动元素,在拖动过程,都会经历三个过程,拖动开始-->拖动过程--> 拖动结束在拖动目标上触发事件 (源元素-被拖动元素):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 : 拖动什么 -> ondragstart (事件)和...在上面的例子ondragstart 属性调用了一个函数,drag(event),它规定了被拖动数据,dataTransfer.setData() 方法设置被拖数据数据类型和值: function...drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } 在这个例子,数据类型是 "Text" 值是可拖动元素 id ("drag1"

    32220

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

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

    1.8K30
    领券