javascript - 删除表中的元素并更改已经存在的 img 的 src

Question

我正在尝试复制 div 中的拖放元素，但问题是当我拖放元素并更改已存在属性的图像 src 时，拖动元素保持不变仍然可拖动。

Fiddle

js 代码片段::

$('.piece').draggable({
    revert: 'invalid',
    start: function (event, ui) {
        // alert('drag start');
        var td_height = $('td').height();
        var draggedID = $(this).width(td_width).height(td_height);
    }
});
$("td").droppable({
    accept: ".piece",
    drop: handleDrop
});

function handleDrop(event, ui) {
    alert('hello' + $(this).attr("id"));
    var drop_src = ui.draggable.attr("src");
    $(this).addClass("ui-state-highlight");
    //$( this ).find( "img" ).attr("src",drop_src);
    $(this).append(ui.draggable.clone().removeClass().addClass('new_piece'));
    ui.draggable.draggable('option', 'revert', false);
}
});

Answer 1

场景一:

如果我们从您离开 JSFiddle 的地方继续，会出现许多问题，每个问题都可能有比显示的更好的解决方案，但这里是:

http://fiddle.jshell.net/Z9HDP/1

您正在拖放到一个已经包含图像的 TD 上，但是在附加新图像之前您没有删除现有图像。我假设您不希望它们并排排列，因此首先删除了 TD 的现有内容。

您正在克隆被拖动的对象，其中包括其拖动的相对偏移量，但并未删除 top 和 left 样式值.这意味着您的克隆位于表格的上方和右侧(通常在 Fiddle 中不在网格中，因此不可见)。我正在删除顶部和左侧的偏移量。

您没有重置原始拖动项目的位置，它会留在您放下它的位置。我假设您希望它回到调色板中并且可能有更好的方法，但我只是将顶部和左侧重置为 0。

function handleDrop(event, ui) {

    //alert('drop ' + $(this).attr("id"));
    var drop_src = ui.draggable.attr("src");
    //alert(drop_src);
    $(this).addClass("ui-state-highlight");

    //$( this ).find( "img" ).attr("src",drop_src);
    $(this).empty().append(ui.draggable.clone().removeClass().addClass('new_piece').css("left", "").css("top", ""));

    // Reset position of dragged item
    ui.draggable.css({
        top: "",
        left: ""
    });

    ui.draggable.draggable('option', 'revert', false);

}

场景 2:

如果您想继续原来的评论，更改目标来源，这似乎可行。我猜你只是错过了拖动项目的位置重置:

http://fiddle.jshell.net/Z9HDP/3/

function handleDrop(event, ui) {

    //alert('drop ' + $(this).attr("id"));
    var drop_src = ui.draggable.attr("src");
    $(this).addClass("ui-state-highlight");

    $(this).find("img").attr("src", drop_src);
    // Reset position of dragged item
    ui.draggable.css({
        top: "",
        left: ""
    });

    ui.draggable.draggable('option', 'revert', false);

}