Question

我正在实现一个拖放代码，我现在拥有的是6个可拖动和可丢弃的图像，这个代码的作用是当图像被拖到另一个图像上时它们也交换了所有图像交换位置（如我试着做的只是交换两张图片的位置，剩下的就是其余的，任何想法都是如此？代码（javascript和jquery） -

function itemInSpot(drag_item, spot) {
    var oldSpotItem = $(spot).find('img');
    if (oldSpotItem.length > 0) {
        oldSpotItem.appendTo('#inventory').draggable({
            revert: 'invalid'
        });
    }
    var item = $('<img />');
    item.attr('src', drag_item.attr('src')).attr('class', drag_item.attr('class')).appendTo(spot).draggable({
        revert: 'invalid'
    });
    drag_item.remove(); // remove the old object
}

$(document).ready(function() {
    $(".circles").draggable({
        revert: 'invalid'
    });
    $('#inventory').droppable();
    $("#circles").droppable({
        accept: '.circles'
    })
    $('#circles,#inventory').bind('drop', function(ev, ui) {
        itemInSpot(ui.draggable, this);
    });
});

Answer 1

在没有看到HTML标记的情况下，我猜测#circles是一个包含许多图像的放置区。这使得更难找出丢弃的图像。相反，为什么不将每个图像作为放置目标而不是整个#circles元素？这样你就可以准确地知道哪个图像被放到了，你的交换功能只能处理图像本身，而不是整个元素包含大量图像。

开发拖放交换javascript / jquery

1 个答案: