jQuery ui实现拖拽文件到文件夹案例

js:

/*拖动事件开始*/
var $gallery = $(".drop-move"),   //拖动对象
    $trash = $(".move-in");     //接收容器

$("dd",$gallery).draggable({   //拖动
    cancel:".ui-icon",
    revert:"invalid",
    containment:"document",
    helper:"clone",
    cursor:"move",
    opacity:'0.5'
});

$trash.droppable({    //拖动接收
    accept:"dd",
    activeClass:"ui-state-highlight",
    drop:function(event,ui){
        // console.log(ui);  拖拽的元素
        dragFile(ui.draggable);
        alert('成功');
    }
});
function dragFile($item) {    //拖拽元素添加到容器
    $item.fadeOut(function() {
        $("<dd class='gallery ui-helper-reset'/>").appendTo( $trash );
        // $item.appendTo( $list ).fadeIn();
    });
}

附图：