我正在尝试复制 div 中的拖放元素,但问题是当我拖放元素并更改已存在属性的图像 src 时,拖动元素保持不变仍然可拖动。
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);
}
});
最佳答案
场景一:
如果我们从您离开 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);
}
关于javascript - 删除表中的元素并更改已经存在的 img 的 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20676939/