重新初始化可拖动后，jQueryUI 可排序复制元素

Question

我正在使用 JqueryUI Draggable 和 Sortable 的组合从网格中 select 图像并将它们拖到可排序的容器中，在那里它们可以重新排序。问题是当我加载更多图像时，我需要重新初始化可拖动以包含添加的项目。

初始化拖动

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

加载更多按钮处理程序

$("#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

更新

从 fiddle 中，我有几点建议。

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

仍然存在操作顺序，因此最好先定义您的函数和全局变量。我从你的第一个函数中删除了 sortable ，仅仅是因为你只需要设置一次。我刚刚对加载按钮做了一些小改动。我创建了另一个函数，因为你会制作很多图像，为什么不把它做成一个函数呢。

页面加载并准备就绪后，我们就可以设置我们的元素了。载入图片，设置sortable，设置draggables，最后编程我们的点击事件。

所以现在你可以将选择器传递给 initDrag() 并且元素或元素将变为可拖动的并且可以被拖动到可排序的。 Sortable 只允许 x 轴，所以它们永远不会被删除。您可能需要考虑一种删除图像的方法。

重新初始化可拖动后，jQueryUI 可排序复制元素

jQueryUI Sortable duplicating elements after reinitialising draggable

javascript

jquery

drag-and-drop

jquery-ui

jquery-ui-sortable