如何动态添加列表项在jquery中可拖动？

Question

这是我的代码

$(document).ready(function () {
    $("#fileToUpload").live("change", function () {
        ajaxFileUpload();
    });
});

function ajaxFileUpload() {

    var FileFolder = "myimages/";
    var fileToUpload = getNameFromPath($('#fileToUpload').val());
    var filename = fileToUpload.substr(0, (fileToUpload.lastIndexOf('.')));
    if (checkFileExtension(fileToUpload)) {


        $.ajaxFileUpload({
            url: 'FileUpload.ashx',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            success: function (data, status) {
                ShowUploadedFiles(data);
                if (typeof (data.error) != 'undefined') {

                    if (data.error != '') {
                        alert(data.error);
                    } else {
                        ShowUploadedFiles(data.upfile, filename);
                        $('#fileToUpload').val("");
                        alert("File uploaded succesfully");
                    }
                }
            },
            error: function (data, status, e) {
                alert(e);
            }
        });
    } else {
        alert('You can upload only jpg,jpeg extensions files.');
    }
    return false;

}

function ShowUploadedFiles(data) {
    $("ul.gallery").append("<li class='ui-widget-content ui-corner-tr'> <h5 class='ui-widget-header'>Rana Saif</h5><img src='" + data + "' width='96';height='72' /><a href='" + data + "'  class='ui-icon ui-icon-zoomin'>View larger</a><a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a></li>");

}

$(function () {
    // there's the gallery and the trash
    var $gallery = $("#gallery"),
        $trash = $("#trash");

    // let the gallery items be draggable
    $("li", $gallery).draggable({
        cancel: "a.ui-icon", // clicking an icon won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: "#gallery > li",
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            deleteImage(ui.draggable);
        }
    });

    // let the gallery be droppable as well, accepting items from the trash
    $gallery.droppable({
        accept: "#trash li",
        activeClass: "custom-state-active",
        drop: function (event, ui) {
            recycleImage(ui.draggable);
        }
    });

    // image deletion function
    var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";

    function deleteImage($item) {
        $item.fadeOut(function () {
            var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);

            $item.find("a.ui-icon-trash").remove();
            $item.append(recycle_icon).appendTo($list).fadeIn(function () {
                $item.animate({
                    width: "48px"
                })
                    .find("img")
                    .animate({
                    height: "36px"
                });
            });
        });
    }

    // image recycle function
    var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";

    function recycleImage($item) {
        $item.fadeOut(function () {
            $item.find("a.ui-icon-refresh")
                .remove()
                .end()
                .css("width", "96px")
                .append(trash_icon)
                .find("img")
                .css("height", "72px")
                .end()
                .appendTo($gallery)
                .fadeIn();
        });
    }

    // image preview function, demonstrating the ui.dialog used as a modal window
    function viewLargerImage($link) {
        var src = $link.attr("href"),
            title = $link.siblings("img").attr("alt"),
            $modal = $("img[src$='" + src + "']");

        if ($modal.length) {
            $modal.dialog("open");
        } else {
            var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
                .attr("src", src).appendTo("body");
            setTimeout(function () {
                img.dialog({
                    title: title,
                    width: 400,
                    modal: true
                });
            }, 1);
        }
    }

    // resolve the icons behavior with event delegation
    $("ul.gallery > li").click(function (event) {
        var $item = $(this),
            $target = $(event.target);

        if ($target.is("a.ui-icon-trash")) {
            deleteImage($item);
        } else if ($target.is("a.ui-icon-zoomin")) {
            viewLargerImage($target);
        } else if ($target.is("a.ui-icon-refresh")) {
            recycleImage($item);
        }

        return false;
    });
});

function checkFileExtension(file) {
    var flag = true;
    var extension = file.substr((file.lastIndexOf('.') + 1));
    switch (extension) {
        case 'jpg':
        case 'jpeg':
        case 'png':
            flag = true;
            break;
        default:
            flag = false;
    }

    return flag;
}



function getNameFromPath(strFilepath) {

    var objRE = new RegExp(/([^\/\\]+)$/);
    var strName = objRE.exec(strFilepath);

    if (strName == null) {
        return null;
    } else {
        return strName[0];
    }

}

在文档就绪ajaxFileUpload（）函数调用，它通过通用处理程序上传服务器上的图片并返回图像路径，并在成功时另一个 函数ShowUploadedFiles（）正在调用哪个追加列表项。这里的图像是可见的，但无法拖动它们。 请告诉我如何使这些元素可拖动？