[英]Remove cloned image after adding another image with jQuery UI
我从上一个问题中得到了一个很好的解决方案,即在删除后成功克隆图像。
这是代码:
$(function() {
var makeDraggable = function(element) {
element.draggable({
revert: "invalid",
appendTo: "#droppable",
helper: "clone"
});
}
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var newClone = $(ui.helper).clone();
makeDraggable(newClone);
$(this).after(newClone);
}
});
// Initalise the program by making first draggable:
makeDraggable($(".draggable img"));
但问题是我想在目标区域一次只显示一个图像。 但目前显示所有丢弃的图像。
更具体地说,当用户在目标区域中放下图像并随后拖动另一图像时,应该从放下的或目标区域中移除先前的图像,并且在目标区域中仅应该看到新图像。 看到这个演示: jsFiddle示例
我该如何解决这个问题?
在drop方法中,而不是像这样使用.after使用.append()
drop: function(event, ui) {
var newClone = $(ui.helper).clone();
makeDraggable(newClone);
$(this).children(':not(span)').remove(); // <--- this will remove all the elements which are not a span before appending
$(this).append(newClone);
}
另外,不要在div内部写drop drop#droppable使用这样的span
<div id="droppable">
<span>drop</span>
</div>
您使用以下代码一个接一个地添加克隆。
$(this).after(newClone);
您需要做的就是:清空droppable容器,然后添加新的克隆,如下所示:
drop: function(event, ui) {
var newClone = $(ui.helper).clone();
makeDraggable(newClone);
$(this).empty().append(newClone);
}
我不会像其他答案那样简单地清空droppable
目标区域,而是在已删除的项目中添加一个类,然后在新的draggable
的dragstart
事件中删除它们。 此外,在选择新的draggable时添加一个小的fadeOut()
事件会很不错。 但是,正如Ishettyl指出的那样,如果用户决定不删除可拖动的元素,那么还必须再次对该元素进行fadeIn()
。 这可以使用自定义revert
功能完成(见下文)。
结果是这样的:
在我看来,这看起来更优雅,并且不会混淆用户是否允许更多项目。
$(function() {
$(".draggable img").draggable({
revert: function (socketObj) {
if (!socketObj) {
if ($(this).hasClass("droppedItems")) {
$(this).fadeOut(function() {
$(this).remove();
});
} else {
$(".droppedItems").fadeIn();
return true;
}
}
},
helper: "clone",
start: function(event, ui) {
$(".droppedItems").fadeOut();
}
});
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(".droppedItems").remove();
var newClone = $(ui.helper).clone();
newClone.addClass("droppedItems");
$(this).append(newClone);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.