代碼的基本部分是什麼使拖動功能使用JQuery UI的良好工作？

我試圖從jQuery UI創建可拖動的功能，但它不工作。我認爲它的jquery編碼有問題。你們能檢查一下嗎？代碼的基本部分是什麼使拖動功能使用JQuery UI的良好工作？

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 
    }); 

};

這是一個Todo應用程序，就像提供的圖片一樣。我希望Pending上的備註可以拖動到In Progress。

JsFiddle link 注：該代碼似乎不能處理在這裏，而在我的本地主機它工作得很好，只是拖動功能。

來源

2016-04-27 AhKing

你能提供選項/默認值/數據和你正在使用的代碼？也許鏈接到jsfiddle？ –

我已經編輯並把鏈接放在我的文章:)或者只是去這個鏈接 https://jsfiddle.net/a8Lc7t4d/ 請注意，localstorage似乎不工作在jsfiddle。不知道爲什麼，但在我的本地主機，它工作正常，除了拖動功能。 – AhKing

我解決了我的問題。我確實搜索jquery ui不工作，我發現，因爲compability。所以他們告訴我用觸摸點使它工作。它確實:) 因此，這不是關於我的代碼重要.. 這裏是我的解決方案的鏈接http://touchpunch.furf.com/ – AhKing

我的問題解決了。我沒有搜索jquery ui不工作，我發現，因爲兼容性。所以他們告訴我用觸摸點使它工作。它確實:)因此，這不是關於我的代碼重要..這裏是我的解決方案的鏈接touchpunch.furf.com

來源

2016-04-28 05:08:31 AhKing

代碼的基本部分是什麼使拖動功能使用JQuery UI的良好工作？

回答

相關問題