1
次のコードは、1つのクローンをドロップ可能領域にドラッグアンドドロップできるようにします。私がドロップ可能な領域に別のクローンをドロップしようとすると、そのクローンは消えます。しかし私はそれをドラッグすることができます。複数のクローンを削除できません
$(".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後、それはしかし、私は特にAndroidデバイス上でのPhoneGapと以上と組み合わせて、これを使用しています、表示されます。
これは、他の人にとってより具体的で複製が難しいことを知っていますが、なんらかの理由で別のクローンをラッパーにドラッグすることができません。
ここに私のコード全体があります。誰かが何かを見つけたら、本当に感謝しています！
<!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>
あなたのHTMLを投稿してください – jbabey
それを見ないでください：http://jsfiddle.net/7Fa35/ –