2016-05-13 2 views
-4

я хочу запустить этот код на моем мобильном телефоне, но если я пытаюсь переместить картину, не двигается, и нет никакой реакции, как я могу держать этот код работает на мобильныхкак я могу поставить этот код на мобильные devicds?

благодаря der122345

copy = 1; 
 
$('.dragArea img').on('dragstart',function(e) { 
 
\t console.log('dragge it!',e); 
 
\t e.originalEvent.dataTransfer.setData("text",e.target.id); 
 
}).on('dragend',function(e) { 
 
\t console.log('dragged',e); 
 
}); 
 

 
$('.drop-field').on('dragover',function(e) { 
 
\t //console.log('dragover',e); 
 
\t e.preventDefault(); 
 
}).on('drop',function(e) { 
 
\t e.preventDefault(); 
 
\t //window.status = 'successfully dragged'; 
 
\t console.log('drop',e,window.status); 
 
\t data = e.originalEvent.dataTransfer.getData("text"); 
 
\t $(this).append(copy ? $('#' + data).clone() : $('#' + data)); 
 
});
.drop-field { 
 
\t border: 4px #287CA1 dashed; 
 
\t display: inline-block; 
 
\t min-width: 50px; 
 
\t height: 50px; 
 
} 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dragArea"> 
 
\t <img src="http://lorempixel.com/image_output/city-q-g-640-480-4.jpg" width="50" height="50" alt="logo" id="logo" /> 
 
</div> 
 
<div class="dropArea"> 
 
\t <span class="drop-field"></span> 
 
\t <span class="drop-field"></span> 
 
</div>

+0

Возможный дубликат [Jquery dragstart и dragend events в JQuery UI] (http://stackoverflow.com/questions/15342172/jquery-dragstart-and-dragend-events-in-jquery-ui) – imvain2

+0

Я хочу использовать код на мобильном устройстве на компьютере работает – der122345

+0

Посмотрите на это, похоже на ответ. http://stackoverflow.com/questions/13940421/how-to-get-jqueryui-drag-drop-working-with-touch-devices – Seano666

ответ

1

Native перетаскивание не поддерживается на мобильных устройствах. Вам нужно будет прибегать либо:

  1. Touch API, используя touchmove и touchend:

    el.addEventListener("touchstart", handleStart, false); 
    el.addEventListener("touchend", handleEnd, false); 
    el.addEventListener("touchcancel", handleCancel, false); 
    el.addEventListener("touchmove", handleMove, false); 
    
  2. Drag and Drop shim, который поддерживает только IOS.

  3. или jQuery UI Draggable с Touch Punch.

Все зависит от того, какую поддержку браузера вы ищем, и сколько кода вы готовы переписать.

Смежные вопросы