我最近更改了拖放游戏,以方便年轻用户使用。
基本上不是将字母拖放到拼写单词,而是单击该字母,它会自动进入正确的区域。
我的问题是,当我使用拖放功能时,字母会克隆,因此您可以在游戏中多次使用每个字母。现在他们没有。
在拖放事件之外有没有不同的方法呢?
$('.drag').on('click', function(e) {
e.preventDefault();
var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);
if(target.length) {
if(b.attr("data-letter") == target.attr("data-letter")){
$(this).addClass('wordglow3').css('color', 'white');
$('.minibutton').prop('disabled', true);
} else {
$(this).addClass('wordglow');
$('.minibutton').prop('disabled', true);
}
b.remove().appendTo('table').css({
'position' : 'absolute',
'top' : currentPos.top,
'left': currentPos.left
});
{
b.animate({
top : targetPos.top,
left : targetPos.left
}, 'slow', function() {
b.remove().css({ top: 0, left: 0 }).appendTo(target);
target.addClass('occupied');
});
}
}
});
这就是我在拖放功能中使用的......
$('.drag').draggable({
helper: 'clone'
});
答案 0 :(得分:1)
if (target.length) {
$(".minibutton").prop("disabled", true);
b.clone().addClass(
b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow"
).appendTo("table").css({
background: "transparent",
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function() {
$(this).css({
top: 0,
left: 0
}).appendTo(target);
target.addClass("occupied");
});
}
(作为旁注,您不必在remove()
之前调用appendTo()
,因为如果元素已经有父元素,则会移动元素。)
答案 1 :(得分:0)
您可以使用以下方法手动克隆元素:
$(e.target).clone()之后(e.target);