Как реализовать перетаскивание через Android WebView

Question

Я реализовал простое приложение для веб-просмотра через Android, чтобы указать на HTML-файл, который будет использоваться для перетаскивания значков, как простая игра-головоломка. Я использовал jquery dragable и droppable библиотеки для реализации на стороне html, но когда я поднял его в веб-просмотре, это не сработало. После поиска на форумах я попробовал несколько исправлений, но ни одно из них не сработало. Я думаю, что этот пост может быть ответом, но он также не сработал: Javascript Drag and drop для сенсорных устройств . Хотя я не думаю, что реализовал это должным образом, так как я просто добавил его в код, использующий перетаскиваемый / сбрасываемый файл из jquery.ui.

Вот перетаскиваемый / сбрасываемый код:

 $(document).ready(function() {
    init(); 
 $( "#draggable" ).draggable({
            snap:"#droppable", snapMode: "inner", revert: "valid"});
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        },
        out: function( event, ui ) {
            $( this )
                .removeClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Drop here" );
        }
    });
  });

вот реализация сенсорного обработчика:

 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();
}

function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);    
}

В теле html я использую div для вызова перетаскиваемого и сбрасываемого объектов. Не уверен, почему это не работает ... любое руководство будет оценено.

Answer 1

Хорошо, поэтому, немного поработав с этим, я наткнулся на эту ссылку, которая делает что-то похожее, но допускает перетаскивание на основе касания. Надеюсь, что это полезно для вас. http://www.stevefenton.co.uk/Content/Jquery-Mobile-Drag-And-Drop/