jQueryUI重新初始化可拖動後可重複排序的元素

Question

我正在使用JqueryUI Draggable和Sortable的組合來從網格中選擇圖像，並將它們拖入可重新排序的可排序容器中。問題是當我加載更多的圖像時，我需要重新初始化可拖動以包含添加的項目。

https://jsfiddle.net/Lpj8jthk/2/

初始化將

function initDragAndDrop(){ 
    $(".ui-draggable").draggable({ 
     opacity: 1.0, 
     helper: 'clone', 
     revert: 'invalid', 
     connectToSortable: '#drop-area' 
    }); 
    $("#drop-area").sortable({ 
     axis:"x", 
     connectWith: '.connectedSortable' 
    }); 

} 

---

$(document).ready(function() { 
    load_draggable_images(track_page); //load content 
    initDragAndDrop(); 
}); 

---

負載更多按鈕handeler

$("#load-more-draggable-images").click(function (e) { //user clicks on button 
    track_page++; //page number increment everytime user clicks load button 
    load_draggable_images(track_page); //load content 

    initDragAndDrop(); 
}); 

---

function load_draggable_images(track_page){ 
    // $('.animation_image').show(); //show loading image 

    $.post('includes/load-images.php', {'page': track_page}, function(data){ 

     if(data.trim().length == 0){ 
      //display text and disable load button if nothing to load 
      $("#load_more_button").text("No more records!").prop("disabled", true); 
     } 

     var parsed = JSON.parse(data); 
     // $("#images-container").empty(); 
     $.each(parsed, function(k,v){ 
      var name = v['filename'].split(".").shift() 
      var htmlString = "<div class='tile' data-timestamp='" + v['time']+ "'>" + 
      "<div>"+ 
      "<img class='ui-draggable' src='" + v['thumbnail'] + "'> "+ 
      "<p>" + name + "</p>"+ 
      "</div> <br> "+ 
      "</div> "; 
      $("#images-container").append(htmlString); 
     }); 

     initDragAndDrop(); 
     //scroll page to button element 
     // $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 800); 

     //hide loading image 
     // $('.animation_image').hide(); //hide loading image once data is received 
    }); 
} 

https://jsfiddle.net/Lpj8jthk/2/

Answer 1

在你success回調，我將執行：

$("#images-container").sortable("refresh"); 

閱讀更多：http://api.jqueryui.com/sortable/#method-refresh

更新

從小提琴中，我會建議一些事情。

的JavaScript

var track_page = 1; 

function initDrag($t) { 
    $t.draggable({ 
    opacity: 1.0, 
    helper: 'clone', 
    revert: 'invalid', 
    connectToSortable: '#drop-area' 
    }); 
} 

function load_draggable_images(track_page) { 
    $("#adverts-container").append(makeImage("https://placehold.it/100x100", "ui-draggable"), makeImage("https://placehold.it/100x100", "ui-draggable"), makeImage("https://placehold.it/100x100", "ui-draggable")); 
    initDrag($("#adverts-container img")); 
} 

function makeImage(s, c) { 
    return $("<img>", { 
    src: s, 
    class: c 
    }); 
} 

$(document).ready(function() { 
    load_draggable_images(track_page); 

    $("#drop-area").sortable({ 
    axis: "x", 
    connectWith: '.connectedSortable' 
    }); 

    initDrag($("#adverts-container img")); 

    $("#load-more-draggable-images").click(function(e) { //user clicks on button 
    console.log('Button Clicked'); 
    track_page++; //page number increment everytime user clicks load button 
    load_draggable_images(track_page); //load content 
    }); 
}); 

有操作的順序依然，所以它可能是最好先定義你的函數和全局變量。我從第一個函數中刪除了排序，因爲你只需要設置一次。加載按鈕我只是做了一些小的修改。而且我創造了另一個功能，因爲你會製作大量的圖像，爲什麼不做這個功能。

頁面加載完成並準備就緒後，我們可以設置我們的元素。加載圖像，設置可排序，設置可拖動，並最終編程我們的點擊事件。

所以，現在你可以通過一個選擇器到initDrag()和一個或多個元素將變得可拖動，並可以拖動到可排序。可排序只允許軸x，所以它們不能被移除。您可能需要考慮刪除圖像的方法。