SimpleCore

Drag And Drop Demo

简单示例

拖动启动

复杂示例

全部3
收件箱
发件箱
草稿

\|\|\|	今天做了些什么?	2011/05/26
\|\|\|	特大优惠?	2011/10/26
\|\|\|	今天做了些什么?	2011/05/26

$(".mail-list tr span").drag({
    proxy:function(){
        return $("<div/>").addClass("drag-proxy")
    },
    atCursor:{
        top:-5,
        left:10
    },
    revert:true,
    dropElements:".demo-mail .drop",
    ondragstart:function(e,drag){
        drag.dropElements.css("background","#f1f1f1");
    },
    ondrag:function(e,drag){
        var length=$(".mail-list :checked").length;
        drag.proxyElement.text(length);
    },
    ondragstop:function(e,drag){
        drag.dropElements.css("background","transparent");
    },
    ondragenter:function(over,drag){
        over.css("background","green");
    },
    ondragleave:function(over,drag){
        over.css("background","#f1f1f1");
    },
    ondragdrop:function(over,drag){
        over.find("em").text($(".mail-list :checked").length);
        $(".mail-list :checked").parents("tr")
        .addClass("drag_"+over.attr("rel"))
        //.hide();
        $(".mail-list :checked").removeAttr("checked");
    }
});
$(".demo-mail li").click(function(){
    var rel=$(this).attr("rel");
    if(rel=="all"){
        $(".mail-list tr").show();
    }else{
        $(".mail-list tr").hide();
        $(".drag_"+rel).show();
    }
});

SimpleUI示例中心

Drag And Drop Demo

简单示例

拖动启动

复杂示例