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，所以它们不能被移除。您可能需要考虑删除图像的方法。