Question

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

初始化拖动

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

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

一旦页面加载并准备就绪，我们就可以设置我们的元素。加载图像，设置可排序，设置可拖动，最后编程我们的点击事件。

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

重新初始化可拖动的

1 个答案: