1
다음 코드는 하나의 복제를 끌어서 놓기 영역에만 끌어다 놓을 수있게합니다. droppable 영역에 다른 복제본을 놓으려고하면 사라집니다. 나는 그러나 그것을 끌 수 있습니다. 이 코드 조각은 안드로이드 장치에 더 구체적으로 폰갭과 함께하지만, 내가 이것을 사용하고, 일반 설정에서 작업하고있는 것처럼 사람들의 의견과 아래에 제공된 jfiddle 다음둘 이상의 복제를 삭제할 수 없습니다.
는 $(".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();
}
});
, 그것은 나타납니다 .
나는 이것이 다른 사람들을 위해보다 구체적이고 복제하기가 더 어렵다는 것을 알고 있지만 어떤 이유로 복제본을 다른 래퍼로 드래그 할 수 없다.
누군가가 뭔가를 발견 할 수 있다면 여기에 전체 코드가 있습니다. 정말 고맙습니다.
<!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/ –