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