HTML5 draggable

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTNL5拖拽应用</title><style>*{padding: 0;margin: 0;}#src,#target{margin: 50px auto;width: 800px;height: 200px;border: 2px solid #424242;font-size: 0;}img{width: 200px;height: 200px;}#target{border: 2px solid red;}p{margin: 0 auto;width: 200px;text-align: center;}</style>
</head>
<body><div id="src"><img id="杨幂A" src="img/1.jpg" draggable="true" alt=""><img id="杨幂B" src="img/2.jpg" draggable="true" alt=""><img id="杨幂C" src="img/3.jpg" draggable="true" alt=""><img id="杨幂D" src="img/4.jpg" draggable="true" alt=""></div><div id="target"></div><p id="msg">将选择的图片拖拽到这里</p><script>var src = document.getElementById('src');var target = document.getElementById('target');var msg = document.getElementById('msg');var draggedID;src.ondragstart = function(e){//拖拽动作开始时触发var event = e || window.event;var target = event.target || event.srcElement;draggedID = target.id;msg.innerHTML = "开始拖曳："+draggedID;}target.ondragenter = function (e){//拖曳时鼠标进入目的元素时触发msg.innerHTML="进入目的元素";//阻止默认事件执行。e.preventDefault();} //在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发target.ondragover = function (e){//拖曳时鼠标在目的元素内移动时触发msg.innerHTML="在目的元素内移动";e.preventDefault();}target.ondragleave = function (e){//被拖拽元素离开目标元素时触发msg.innerHTML="离开目标元素";e.preventDefault();}src.ondragend = function (e){//拖曳动作结束时触发msg.innerHTML="结束拖曳";}//cloneNode（）默认为false 克隆的节点复制真节点的样式，标签，属性。至于标签里的元素，事件没有复制，所以我们可以称它浅克隆。//cloneNode（true）深克隆 //参数设置为true时，表明克隆节点及其属性以及后代；参数设置为false时，表明克隆节点本身。target.ondrop = function (e) {//在目的元素内释放拖曳元素时触发var newElem = document.getElementById(draggedID).cloneNode(false);target.innerHTML = "";target.appendChild(newElem);e.preventDefault();}</script>
</body>
</html>

HTML5 draggable 拖拽实例相关推荐

html5限制拖拽区域怎么实现,html5怎么实现拖拽
html5实现拖拽的方法:首先新建一个空的HTML5结构:然后在body元素中放置一个div:最后通过allowDrop,drag和drop三个函数实现拖拽功能即可. 本文操作环境:Windows7系 ...
vue.draggable 拖拽 ant 组件布局
vue.draggable 拖拽项目需求中,需要支持拖拽,即找到了vue.draggable,下面来说一下基本使用方法 1.首先需要安装它,官网地址 https://www.itxst.com/vu ...
html5实现表格拖拽,根据HTML5的新方法 drag drop 方法实现表格拖拽实例
上一次学习了html5的drag和drop方法,传送门就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...
HTML5原生拖拽/拖放 Drag Drop 详解
转载自:juejin.im/post/5a169d- 前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准 ...
vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用首先在使用的组件中引入 import draggable f ...
HTML5原生拖拽/拖放(drag drop)详解
前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
html5 list 拖拽排序,vue实现可拖拽排序的列表
在做友情链接管理功能的时候,考虑到有个对友情链接排序的需求,开始的时候我是在这个list 里边加了rank字段,用户需要手动输入rank ,点击保存后,后台通过用户输入的rank序号进行排序,这显然 ...
Draggable拖拽
由于目前所在的公司做的是学校管理的项目,功能中就包含课程表定制,学生排序,邮箱回执插入等,都需要用到拖拽的功能,以下就介绍下项目中用的draggable实现的拖拽排序实现效果图功能描述:搜索框输入 ...
html5图片拖拽删除,基于jquery插件实现拖拽删除图片功能
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下实现以下效果完全拖出这个层,图片会消失,否则图片会回到原来的位置 #mydiv{ width:900px ...

HTML5 draggable 拖拽实例

HTML5 draggable

HTML5 draggable 拖拽实例相关推荐

最新文章

热门文章