JQuery - перетаскиваемые изображения на iPad/iPhone - как интегрировать event.preventDefault();?

Я использую jQuery, jQuery UI и jQuery mobile для создания веб-приложения для iPhone/iPad. Теперь я создаю изображения, и их нужно перетаскивать, поэтому я сделал это:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Drag - Test</title>
        <link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css'; return false;" />
        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    </head> 
    <body>
    <div>
        <div style="width:500px;height:500px;border:1px solid red;">
            <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" />
            <img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" />
        </div>
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function() {
        $(".draggable").draggable();
    });
</script>
</html>

Здесь вы можете увидеть живой пример: http://jsbin.com/igena4/

Проблема в том, что вся страница хочет прокручиваться. Я искал в примерах Apple HTML5 и нашел это, чтобы предотвратить прокрутку страницы, чтобы изображение перетаскивалось:

...
onDragStart: function(event) {
    // stop page from panning on iPhone/iPad - we're moving a note, not the page
    event.preventDefault();
    ...
}

Но проблема для меня, как я могу включить это в свой jQuery? Где я могу получить event?

С наилучшими пожеланиями.

Ответы

Ответ 1

Попробуйте эту библиотеку

https://github.com/furf/jquery-ui-touch-punch

Просто выполните следующие простые шаги, чтобы включить события касания в вашем jQuery Приложение UI:

  • Включите jQuery и пользовательский интерфейс jQuery на странице.

    <script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

  • Включите Touch Punch после пользовательского интерфейса jQuery и перед его первым использованием.

    Обратите внимание, что если вы используете компоненты jQuery UI, Touch Punch должен быть включен после jquery.ui.mouse.js, как Touch Punch изменяет его поведение.

    <script src="jquery.ui.touch-punch.min.js"></script>

  • Нет 3. Просто используйте JQuery UI, как ожидалось, и следите за тем, чтобы он работал одним касанием пальца.

    <script>$('#widget').draggable();</script>

Ответ 2

Я нашел решение, которое работает на браузере рабочего стола и iOS Safari на iPad и iPhone: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

Вам нужно только загрузить и интегрировать файл JavaScript, чтобы он был.

Ответ 3

Я предполагаю, что это будет выглядеть как

$(document).bind("dragstart", function(event, ui){
  event.preventDefault(); 
  //return false;//edited
  });

Я не уверен, что это должно быть document или просто 'body'

ИЗМЕНИТЬ

Я не знаю, откуда вы взяли этот образец кода, но он всегда блокирует любое перетаскивание. Попробуйте, если это поможет - он должен предотвратить всплытие, поэтому, если прокрутка работает с документом node - событие не должно туда попасть. [Я все еще не могу попробовать это на яблоках]

$(document).ready(function() {
        $(".draggable").draggable();
        $('body>div').bind("dragstart", function(event, ui){
        event.stopPropagation();
        });
    });

Ответ 5

Вы должны просто взглянуть на jquery Doc http://jqueryui.com/demos/draggable/#events

Обратный вызов для события запуска должен быть заблокирован при вызове метода перетаскивания, как и в случае с любым другим jQuery, всегда есть параметр, в котором вы можете передавать объекты, содержащие обратные вызовы. Попробуйте вызвать preventDefaut в начале обратного вызова.

$( "#draggable" ).draggable({
        start: function(e) {
            e.preventDefault();
            counts[ 0 ]++;
            updateCounterStatus( $start_counter, counts[ 0 ] );
        },
        drag: function() {
            counts[ 1 ]++;
            updateCounterStatus( $drag_counter, counts[ 1 ] );
        },
        stop: function() {
            counts[ 2 ]++;
            updateCounterStatus( $stop_counter, counts[ 2 ] );
        }
    });