Question

大家好我正在通过jquery mobile在android上进行拖放事件。我测试浏览器上的代码工作正常但不在设备上。任何人都可以帮我解决这个问题。我正在关注链接的第一个教程......

    http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

Answer 1

问题可能是以下之一： 1-设备必须具有互联网连接 2-您使用的文件不是“jquery mobile”。它们只是用于开发网页的jquery文件。 3-如果您在平板电脑上使用该应用程序，我想您的应用程序可以通过平板电脑的鼠标工作。然而，触摸它无法奏效。

这些是我能猜到的问题。我希望你找到确切的解决方案。如果你找到它，请在这里发给我：）

Answer 2

这是我的剧本我已经完成了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>

Answer 3

你的代码看起来很好，你告诉它已经成功地在浏览器上运行了。我认为问题可能是您使用的jquery文件。如果您已链接驻留在网站上的jquery文件，请确保您的设备具有Internet连接。如果没有互联网连接，请下载并将“jquery mobile”文件放入assest / www文件夹并链接该文件。

你没有在模拟器上运行应用程序吗？你遇到的错误是什么？

PhoneGap App - 在android中作为via jquery mobile拖放

3 个答案: