HTML5拖拽

最近遇到了这么一个问题，需要html能够拖动并且能够编辑，编辑加一个contenteditable这个属性就可以了。
但是拖动出了问题，那就是，拖动的时候元素之间存在问题。

原来e.target获取到的并不是我想要的元素节点，然后做了一下修改：

/**
* selector:jquery选择器
* parent:拖动的最大父元素选择器
**/
function drag(selector, parent) {
    var t;
    var source = $(selector);
    source.bind("dragstart", function(e){
        t = $(e.target).closest(parent);
        e.effectAllowed = "move";
    });
    source.bind("dragover", function(e){
        e.preventDefault();
    });
    source.bind("drop", function(e){
        if(source.index(t) == source.index($(e.target).closest(parent))) { // 防止放到自己里面
        } else if(source.index(t) > source.index($(e.target).closest(parent)))
            $(e.target).closest(parent).before(t);
        else
            $(e.target).closest(parent).after(t);
        source = $(selector);
    });
}

这样就可以了，但是还有个缺点：一定要鼠标放了之后才会有效果，不能实时展现出结果，于是我把ondrop的方法写到了ondragover：

/**
* selector:jquery选择器
* parent:拖动的最大父元素选择器
**/
function drag(selector, parent) {
    var t;
    var source = $(selector);
    source.bind("dragstart", function(e){
        t = $(e.target).closest(parent);
        e.effectAllowed = "move";
    });
    source.bind("dragover", function(e){
        if(source.index(t) == source.index($(e.target).closest(parent))) { // 防止放到自己里面
        } else if(source.index(t) > source.index($(e.target).closest(parent))) {
            $(e.target).closest(parent).before(t);
            source = $(selector);
        } else {
            $(e.target).closest(parent).after(t);
            source = $(selector);
        }
        e.preventDefault();
    });
    source.bind("drop", function(e){
    });
}

这样就可以了，不过如果你是要用在项目里面，我建议你使用jquery的插件：http://jqueryui.com/sortable/

DEMO地址：http://www.acgist.com/demo/drag/index.html