HTML5 拖拽的简单实践

坑爹点记录：

1、一定要加入 event.preventDefault(); 不然无效。

2、想测试的话，随便找到一个layui的table演示页面，插入脚本即可、不过要先在全局插入jquery。

var o = document.createElement('script');
o.src = 'https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js';
document.documentElement.appendChild(o);
console.log(jQuery.fn.jquery);

var CURRENT_DROP_INDEX = 0
var CURRENT_DROP_EL = null
// #fucktable
document.querySelectorAll('.layui-table-view tr').forEach(function (e, i) {$(e).attr("draggable", true)e.ondragstart = function (e) {CURRENT_DROP_INDEX = $(this).index()CURRENT_DROP_EL = $(this)}e.ondragover = function (e) {event.preventDefault();$(this).css("background-color", "#ccc")}e.ondragleave = function (e) {$(this).css("background-color", "")}e.ondrop = function (e) {event.preventDefault();$(this).css("background-color", "")// exchange($(this), CURRENT_DROP_EL)console.log($(this).index(), CURRENT_DROP_INDEX, $(this), CURRENT_DROP_EL);}
});// 推上去
var exchange = function (a, b) {var n = a.next();var p = b.prev();b.insertBefore(n);a.insertAfter(p);
}

参考文章：

https://blog.csdn.net/u014744118/article/details/78649761

http://www.runoob.com/try/try.php?filename=tryjsref_ondrop

http://www.runoob.com/jsref/event-ondrop.html

转载于:https://www.cnblogs.com/CyLee/p/9152154.html

HTML5 拖拽的简单实践相关推荐

html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用树形结构非常简单,t ...
html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
html5网页小游戏拖拽,HTML5拖拽功能实现的拼图游戏
本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 具体代码如下所示: drag拖拽 .box{ f ...
C#实现树型结构TreeView节点拖拽的简单功能，附全部源码，供有需要的参考
为什么80%的码农都做不了架构师?>>> 应用软件是否好用就体现在一些细节操作上,开发人员是否考虑到了很多细节,例如一个树形结构的数据若不支持拖拽功能那用起来会很糟糕一些,用户 ...
[html] HTML5拖拽事件的顺序是什么？
[html] HTML5拖拽事件的顺序是什么? ondragstart :源对象开始被拖动 ondrag:源对象被拖动过程中 ondragend:源对象被拖动结束ondragenter:源对象拖动着进 ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
html5拖拽换位效果演示,HTML5拖拽（二）--dataTransfer
从HTML5拖拽(一)我们得知:利用html5的dragable属性以及一些拖拽事件可以进行拖拽,但是无法获得所拖拽的数据.dataTransfer就应运而生,顾名思义,这是个传递数据的属性. 基础语 ...
HTML5拖拽API的使用实例
首先介绍一下HTML5拖拽过程中产生的事件: 如果A被拖动到B内部,则 1. A会触发ondragstart, ondrag, ondragend,分别代表拖拽开始,拖拽进行中和拖拽结束: 2. B会 ...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...

HTML5 拖拽的简单实践

HTML5 拖拽的简单实践相关推荐

最新文章

热门文章