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