使用Jquery UI使可拖动函数正常工作的代码的基本部分是什么？

Question

I was trying to create draggable function from jquery ui but its not working. I think its have something wrong with my jquery coding. Can you guys check it out for me?

todo.init = function (options) {

    options = options || {};
    options = $.extend({}, defaults, options);

    $.each(data, function (index, params) {
        generateElement(params);
    });

$.each(codes, function (index, value) {
        $(value).droppable({
            drop: function (event, ui) {
                    var element = ui.helper,
                        css_id = element.attr("id"),
                        id = css_id.replace(options.taskId, ""),
                        object = data[id];

                        // Removing old element
                        removeElement(object);

                        // Changing object code
                        object.code = index;

                        // Generating new element
                        generateElement(object);

                        // Updating Local Storage
                        data[id] = object;
                        localStorage.setItem("todoData", JSON.stringify(data));

                        // Hiding Delete Area
                        $("#" + defaults.deleteDiv).hide();
                }
        });
    });

$("#" + options.deleteDiv).droppable({
        drop: function(event, ui) {
            var element = ui.helper,
                css_id = element.attr("id"),
                id = css_id.replace(options.taskId, ""),
                object = data[id];

            // Removing old element
            removeElement(object);

            // Updating local storage
            delete data[id];
            localStorage.setItem("todoData", JSON.stringify(data));

            // Hiding Delete Area
            $("#" + defaults.deleteDiv).hide();
        }
    })

};

 var generateElement = function(params){
    var parent = $(codes[params.code]),
        wrapper;

    if (!parent) {
        return;
    }

    wrapper = $("<div />", {
        "class" : defaults.todoTask,
        "id" : defaults.taskId + params.id,
        "data" : params.id
    }).appendTo(parent);

    $("<div />", {
        "class" : defaults.todoHeader,
        "text": params.title
    }).appendTo(wrapper);

    $("<div />", {
        "class" : defaults.todoDate,
        "text": params.date
    }).appendTo(wrapper);

    $("<div />", {
        "class" : defaults.todoDescription,
        "text": params.description
    }).appendTo(wrapper);

    $("." + defaults.todoTask).draggable();
    wrapper.draggable({
        start: function() {
            $("#" + defaults.deleteDiv).show();
        },
        stop: function() {
            $("#" + defaults.deleteDiv).hide();
        },
        revert: "invalid",
        revertDuration : 200
    });

};

This is a Todo Application, like on the pic provided. I want the notes on Pending to be draggable to In Progress .

JsFiddle link note: the code seems can't be process here while in my localhost it works well except that dragging function.

Answer 1

My problem is solved. I did search for jquery ui not working and i found out that because of compatibility. So they told me to use touch point to make it work. and it did :) Therefore it's not about my coding for it matters.. here's the link for my solution touchpunch.furf.com