如何用html实现元素拖放

 时间:2026-02-14 06:19:54

1、首先我们搭建一个html框架,元素至少需要有两个:

1.拖放的物体id

2.放置的容器id(可多个)

如何用html实现元素拖放

如何用html实现元素拖放

2、其次是编写在拖放物体id的事件处理:

ondragstart事件:

ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值

在这个例子中,数据类型是text,值是它的id

如何用html实现元素拖放

3、其次是编写放置容器id的事件处理:

1.ondragover事件:

这个事件规定数据能被拖放到何处的范围,拖拽到范围内的时候会出现允许的手势。这个例子中绑定了allowDrop时间,主要任务在于阻止默认行为,很多人不懂,其实是必须的,因为本身默认是阻止放置物体的,所以要阻止默认行为

如何用html实现元素拖放

4、续上:

2.ondrop时间:

当放开拖放数据的时候,会触发这个事件,我们绑定了一个函数drop,函数内需要执行:

阻止默认行为->getData获取数据类型->把被拖元素追加到容器内

5、运行代码效果:

如何用html实现元素拖放

如何用html实现元素拖放

如何用html实现元素拖放

  • ajax怎么传集合
  • 织梦CMS如何进行栏目管理
  • css+div文本样式
  • 建设个人网站基本步骤
  • 卧室充分利用空间
  • 热门搜索
    呼伦贝尔旅游网 湘潭旅游景点大全 黄山旅游景点大全 罗平旅游景点 北京怀柔旅游景点 冬季适合去哪里旅游 旅游日语 三清山旅游网 重庆黑山谷旅游攻略 泰国旅游买什么好