PhoneGap的应用程序 - 通过jQuery Mobile的拖放在Android作为一个 [英] PhoneGap App -- Drag and Drop in android as a via jquery mobile

问题描述

大家好我的工作阻力，并通过jQuery Mobile的Andr​​oid中掉落的事件。我测试浏览器上的code工作正常，但不是在设备上。任何人可以帮助我走出这个问题。我下面链接的第一个教程....

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

解决方案

这是我的剧本我已经做Emrullah ...

 ＆LT;脚本类型=文/ JavaScript的＆GT;
  $（文件）。就绪（函数（）{
  $（INIT）;
  功能的init（）{
  document.addEventListener（touchstart，touchHandler，真正的）;
  document.addEventListener（touchmove，touchHandler，真正的）;
  document.addEventListener（touchend，touchHandler，真正的）;
  document.addEventListener（touchcancel，touchHandler，真正的）;
  }
  $（函数（）{
  $（拖）
  .bind（的dragstart功能（事件）{
  // REF了拖的元素，使复印件
  变量$阻力= $（本），$代​​理= $ drag.clone（）;
  //修改拖源元素
  $ drag.addClass（纲目）;
  //插入并返回代理元素
  返回$ proxy.appendTo（document.body的）.addClass（幽灵）;
  }）
  .bind（拖，函数（事件）{
  //更新代理元素的位置
  $（event.dragProxy）的.css（{
  左：event.offsetX，
  顶部：event.offsetY
  }）;
  }）
  .bind（dragend功能（事件）{
  //去掉代理元素
$（event.dragProxy）.fadeOut（正常，函数（）{
$（这）一个.remove（）;
}）;
//如果没有降，这个目标是previously下降
如果（event.dropTarget＆安培;！＆安培; $（本）.parent（）是（）。水滴）{
//动作输出的详细说明
$（'＃日志）追加（。'＆LT; D​​IV＆GT;删除了＆LT; B＆GT;'+ this.title +'＆LT; / B＆GT;来自以下; B＆GT;'+
    this.parentNode.title +'＆LT; / B＆GT;＆LT; / DIV＆GT;'）;
//把它在它的原始＆LT; D​​IV＆GT;
$（'＃nodrop'）追加（本）;
    }
//恢复到正常状态
    $（本）.removeClass（纲目）;
    }）;
    $（'降'）
.bind（dropstart功能（事件）{
//不降本身
如果（这种== event.dragTarget.parentNode）返回false;
//激活滴的目标元素
$（本）.addClass（活动）;
}）
.bind（水滴，函数（事件）{
//如果有一个下降，还可以将一些数据...
$（本）.append（event.dragTarget）;
//动作输出的详细...
$（'＃日志）追加（。'＆LT; D​​IV＆GT;＆丢弃LT; B＆GT;'+ event.dragTarget.title +'＆LT; / B＆gt;向＆LT; B＆GT;'+
    this.title +'＆LT; / B＆GT;＆LT; / DIV＆GT;'）;
}）
.bind（dropend功能（事件）{
//停用滴的目标元素
$（本）.removeClass（活动）;
    }）;
}）;
    功能touchHandler（事件）
    {
    VAR倒是= event.changedTouches，
    第一=触摸[0]，
    类型=;
    开关（event.type）
    {
    案touchstart：TYPE =鼠标按下;打破;
    案touchmove：TYPE =鼠标移动;打破;
    案touchend：TYPE =鼠标松开;打破;
    默认：返回;
    }
    变种simulatedEvent = document.createEvent（的MouseEvent）;
    simulatedEvent.initMouseEvent（类型，真实的，真实的，窗口，1，
        first.screenX，first.screenY，
           first.clientX，first.clientY，假的，
                 假的，假的，假的，0 / *左* /，NULL）;
    first.target.dispatchEvent（simulatedEvent）;
     。事件preventDefault（）;
     返回;
    }
    }）;
    ＆LT; / SCRIPT＆GT;
 

Hi guys i am working on drag and drop event in android via jquery mobile. I tested the code on browser works fine but not on device. can anybody help me out this issue. I am following 1st tutorial of the link....

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

解决方案

This is my script i have done 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>

这篇关于PhoneGap的应用程序 - 通过jQuery Mobile的拖放在Android作为一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！