html5拖拽换位效果演示,H5 实现div拖放位置互换

1 给要进行拖拽的div加上draggable="true" οndrοp="drop(event,this)" οndragstart="drag(event, this)" οndragοver="allowDrop(event)"三个属性

2.放下div时，交换两个div的内容innerHTML

var srcdiv = null;

var temp = null;

//当拖动时触发

function drag(ev, divdom) {

srcdiv = divdom;

temp = divdom.innerHTML;

}

function allowDrop(ev) {

ev.preventDefault();

}

//当放下后触发

function drop(ev, divdom) {

ev.preventDefault();

if (srcdiv !== divdom) {

srcdiv.innerHTML = divdom.innerHTML;

divdom.innerHTML = temp;

}

//假如div里面时echarts图表

$('div').removeAttr('_echarts_instance_')

}

html5拖拽换位效果演示,H5 实现div拖放位置互换相关推荐

html5拖拽换位效果演示,HTML5拖拽（二）--dataTransfer
从HTML5拖拽(一)我们得知:利用html5的dragable属性以及一些拖拽事件可以进行拖拽,但是无法获得所拖拽的数据.dataTransfer就应运而生,顾名思义,这是个传递数据的属性. 基础语 ...
html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用树形结构非常简单,t ...
android qq消息数拖拽动画,史上最详细仿QQ未读消息拖拽粘性效果的实现
好久没写文章了,前段时间由于项目代码重构忙了一段时间,现在终于有点时间了就为大家带来一篇关于动画学习的自定义View:类似QQ消息拖拽的效果. 其实QQ当时更新的时候我还没注意到这个小红点是可以拖拽的 ...
HTML5拖拽文件上传
上传文件 HTML5新增了文件API,提供客户端本地操作文件的可能. 我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称.大小.类型.和修改时间. file类型的 ...
android开发之仿QQ拖拽界面效果（侧滑面板）
仿QQ拖拽界面效果(侧滑面板),我们一般继承Layout,不会直接去继承ViewGroup,而是继承FrameLayout,为什么五大布局我们偏偏只继承FrameLayout呢? 第一,FrameLa ...
Android qq消息气泡实现效果,Android 实现仿QQ拖拽气泡效果的示例
效果图: 一.实现思路在列表中默认使用自定义的TextView控件来展示消息气泡,在自定义的TextView控件中重写onTouchEvent方法,然后在DOWN.MOVE.UP事件中分别处理拖拽效 ...
ToolStrip控件左右拖拽移动效果实现
1.主窗体下部添加一个Panel乘放ToolStrip控件以实现ToolStrip在窗体下部定位. 2.当ToolStrip控件中子控件超出屏幕时,拖动控件可以实现滑动效果.拖动到控件边缘距窗体边缘1 ...
[html] HTML5拖拽事件的顺序是什么？
[html] HTML5拖拽事件的顺序是什么? ondragstart :源对象开始被拖动 ondrag:源对象被拖动过程中 ondragend:源对象被拖动结束ondragenter:源对象拖动着进 ...

html5拖拽换位效果演示,H5 实现div拖放位置互换

html5拖拽换位效果演示,H5 实现div拖放位置互换相关推荐

最新文章

热门文章