我对Javascript和JQuery有点陌生,因此请原谅我为您解释这道理。我创建了一个图片库,用户可以在其中拖放到拖放区。我正在使用还原选项,因此最初未放置在放置区中的图像会返回其原始位置(使用还原:“无效”)。现在,当我将图像从“图库”(可滚动的div)拖动到放置区,然后离开放置区时,它完美地回到了放置区中的位置。但是,如果我从图库within中拖动图像而不是将其拖到放置区中,它将应该还原到其在图库中的原始位置。相反,它会还原并完全消失!我在控制台中进行了检查,即使我从未指定此样式选项(我相信$(this).hide()会提示该问题),它也会将原始图像的CSS“显示”创建为“无”。我尝试在CSS中手动更改此设置,但没有成功。我想念什么吗?让我知道是否可以提供任何说明。我无法创建JSFiddle,因为项目文件太多。谢谢!
((为了澄清,我需要一个克隆的图像,以便可以将其从可滚动div中拖出,并且我使用$(this).hide(),所以我没有被拖动图像的无限副本,但是它也是似乎是造成问题的原因)。基本上,我希望这样,以便如果我的图像最初被拖动到图库中时,它应该恢复到其在图库中的位置,但是现在它正在还原然后消失。
$('.item').draggable({
revert: "invalid",
helper: 'clone',
start: function () {
$(this).hide();
$('.item').css('cursor', 'grabbing');
},
stop: function () {
$('.item').css('cursor', 'grab');
}
});
$("#arena").droppable({
accept: '*',
drop: function (event, ui) {
$('.item').css('cursor', 'grab');
var parentOffset = jQuery('#arena').offset();
if(!ui.draggable.hasClass("newItem")) {
var new_item = $(ui.helper).clone().removeClass('item').addClass("newItem");
new_item.draggable({
revert: 'invalid',
start: function () {
$(ui.helper).hide();
$('.newItem').css('cursor', 'grabbing');
},
stop: function () {
$('.newItem').css('cursor', 'grab');
}
}).css({
'position': 'absolute',
'left': (ui.position.left - parentOffset.left) + 'px',
'top': (ui.position.top - parentOffset.top) + 'px',
});
$(this).append(new_item);
gallery_count--;
}
我为可能遇到相同问题的人(讨厌的克隆)找到了解决方案。我创建了一个名为“ moved”的标志变量,该变量被初始化为false,以便在将其拖动到图库中以使其保持可见状态时通过条件(请参见下面的代码)。当图像放在放置区上时,moveed设置为true,这样原始图像将被隐藏并且在图库中仍不可见。然后,当我拖动另一张图像时,我将其重新初始化为false,因此其循环方式相同。
var moved = false;
$(function() {
$('.item').draggable({
helper: 'clone',
revert: "invalid",
start: function () {
moved = false;
$(this).hide();
$('.item').css('cursor', 'grabbing');
},
stop: function (event, ui) {
if ((ui.helper.hasClass("item") && moved == false)) {
$(this).show();
}
$('.item').css('cursor', 'grab');
}
});
$("#arena").droppable({
accept: '*',
drop: function (event, ui) {
$('.item').css('cursor', 'grab');
var parentOffset = jQuery('#arena').offset();
if(!ui.draggable.hasClass("newItem")) {
moved = true;
var new_item = $(ui.helper).clone().removeClass('item').addClass("newItem");