以下代码仅允许我将一个克隆拖放到可放置区域。当我尝试将另一个克隆放在可放置区域时，它会消失。不过我可以拖动它。
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
根据人们的评论和下面提供的 jfiddle，这段代码似乎在典型的设置中工作，但是，我将其与 Phonegap 结合使用，更具体地说是在 Android 设备上。
我知道这对于其他人来说更具体且更难以复制，但由于某种原因，它不允许我将另一个克隆拖到包装器上。
这是我的完整代码，如果有人能发现一些东西，我将非常感激!
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script src="jquery-1.7.min.js"></script>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="ff.css" />
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
originalEvent.preventDefault();
});
}
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
$(".show").live('touchstart', function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginLeft: "-150px"
}, 500 );
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginLeft: "0px"
}, 1000 );
$("#openCloseIdentifier").hide();
}
});
}//onDeviceReady
</script>
</head>
<body>
<div id="wrapper">
<div id="navWrap">
<div id="openCloseIdentifier"></div>
<div id="slider">
<div id="sliderContent">
<img class="shape" src="images/150x150.gif" />
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="images/show.gif" class="show" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
想通了。
我在包装 div 中克隆了嵌套的形状。那是行不通的。
拿出来就可以了!
关于javascript - 无法掉落超过 1 个克隆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7999528/