[英]PhoneGap App — Drag and Drop in android as a via jquery mobile
嗨,大家好,我正在通过jquery mobile在android中进行拖放事件。 我在浏览器上测试了代码,但在设备上无法正常工作。 谁能帮我解决这个问题。 我正在关注链接的第一篇教程。
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
问题可能是以下情况之一:1-设备必须具有Internet连接2-您使用的文件不是“ jquery mobile”。 它们只是用于开发网页的jquery文件。 3-如果您在平板电脑上使用该应用程序,我猜您的应用程序可以通过平板电脑的鼠标运行。 但是,触摸无法正常工作。
这些是我能猜到的问题。 希望您找到确切的解决方案。 如果找到了,请给我发贴:)
这是我做过Emrullah的剧本...
<script type="text/javascript">
$(document).ready(function() {
$( init );
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
$(function(){
$(".drag")
.bind( "dragstart", function( event ){
// ref the "dragged" element, make a copy
var $drag = $( this ), $proxy = $drag.clone();
// modify the "dragged" source element
$drag.addClass("outline");
// insert and return the "proxy" element
return $proxy.appendTo( document.body ).addClass("ghost");
})
.bind( "drag", function( event ){
// update the "proxy" element position
$( event.dragProxy ).css({
left: event.offsetX,
top: event.offsetY
});
})
.bind( "dragend", function( event ){
// remove the "proxy" element
$( event.dragProxy ).fadeOut( "normal", function(){
$( this ).remove();
});
// if there is no drop AND the target was previously dropped
if ( !event.dropTarget && $(this).parent().is(".drop") ){
// output details of the action
$('#log').append('<div>Removed <b>'+ this.title +'</b> from <b>'+
this.parentNode.title +'</b></div>');
// put it in it's original <div>
$('#nodrop').append( this );
}
// restore to a normal state
$( this ).removeClass("outline");
});
$('.drop')
.bind( "dropstart", function( event ){
// don't drop in itself
if ( this == event.dragTarget.parentNode ) return false;
// activate the "drop" target element
$( this ).addClass("active");
})
.bind( "drop", function( event ){
// if there was a drop, move some data...
$( this ).append( event.dragTarget );
// output details of the action...
$('#log').append('<div>Dropped <b>'+ event.dragTarget.title +'</b> into <b>'+
this.title +'</b></div>');
})
.bind( "dropend", function( event ){
// deactivate the "drop" target element
$( this ).removeClass("active");
});
});
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
return;
}
});
</script>
您的代码看起来不错,您告诉它已成功在浏览器上运行。 我认为问题可能出在您使用的jquery文件中。 如果已链接了驻留在网站上的jquery文件,请确保您的设备具有Internet连接。 如果没有Internet连接,请下载“ jquery mobile”文件并将其放入assest / www文件夹中并链接该文件。
您不是在模拟器上运行该应用程序吗? 您遇到的错误是什么?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.