Drag & Drop на Safari iOS - PullRequest
Новая
       35

Drag & Drop на Safari iOS

15 голосов
/ 07 января 2012

Я кодирую веб-страницу для просмотра на iPad.Он использует Safaris / Webkits drag & drop.Я точно скопировал код перетаскивания примера Safari, но он не будет работать.

Моя проблема: Событие ondrop никогда не вызывается при запуске веб-страницы (HTML, CSS & Javascript)в Safari Desktop или в Safari на iPad.На ipad я не могу даже перетаскивать элементы (появляется микроскопическая вещь, и она не будет перетаскиваться, когда я удерживаю и перемещаю палец над элементом).Перетаскивание работает на рабочем столе.

Что не так?

Небольшой пример кода можно найти в самом низу этой страницы: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html

<!DOCTYPE html>
<html>

<head>
  <title>Drag-and-Drop</title>

  <script>
    <!--
    var dragitem = undefined;

    function setdragitem(item, evt) {
      dragitem = item;
      // alert('item: '+item);
      // item is an HTML DIV element.
      // evt is an event.

      // If the item should not be draggable, enable this next line.
      // evt.preventDefault();

      return true;
    }

    function cleardragitem() {
      dragitem = undefined;
      // alert('item: '+item);
    }

    function dodrag() {
      // alert('item: '+dragitem);
    }

    // This is required---used to tell WebKit that the drag should
    // be allowed.
    function handledragenter(elt, evt) {
      evt.preventDefault();
      return true;
    }

    function handledragover(elt, evt) {
      evt.preventDefault();
      return true;
    }


    function handledragleave(elt, evt) {

    }

    function handledrop(elt, evt) {
      // alert('drop');
      dragitem.style.display = "none";
      var newid = dragitem.id + '_dest';
      var dest = document.getElementById(newid);
      dest.innerHTML = dragitem.innerHTML;
    }


    // -->
  </script>

  <style>
    <!-- .wordbox {
      border: 1px solid black;
      text-align: center;
      width: 50px;
      float: left;
      -webkit-user-drag: element;
      -webkit-user-select: none;
    }
    
    .spacer {
      clear: both;
    }
    
    .target {
      margin-top: 30px;
      padding: 30px;
      width: 70px;
      border: 1px solid black;
      background: #c0c0ff;
      margin-bottom: 30px;
      -webkit-user-drop: element;
    }
    
    .word {
      margin: 30px;
      min-height: 30px;
      border-bottom: 1px solid black;
      width: 50px;
      float: left;
    }
    
    -->
  </style>

</head>

<body>

  <p>Drop words onto target area to put them in their places.</p>

  <div class='wordbox' id='this' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>This</div>
  <div class='wordbox' id='is' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>is</div>
  <div class='wordbox' id='a' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>a</div>
  <div class='wordbox' id='test' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>test</div>

  <div class='spacer'></div>
  <div class='target' ondragenter='handledragenter(this, event);' ondragover='handledragover(this, event);' ondragleave='handledragleave(this, event);' ondrop='handledrop(this, event);'>TARGET</div>

  <div class='words'>
    <div class='word' id='this_dest'></div>
    <div class='word' id='is_dest'></div>
    <div class='word' id='a_dest'></div>
    <div class='word' id='test_dest'></div>
  </div>


</body>

</html>

Вот JSFiddle (помните, что drag & drop - это Webkit, поэтому только для Safari - эта веб-страница предназначена только для ipad): https://jsfiddle.net/eyM3y/

Ответы [ 3 ]

10 голосов
/ 13 января 2012

Рабочая альтернатива:

Во-первых, используйте jquery UI http://jqueryui.com/demos/ для функции перетаскивания

, а затем добавьте этот скрипт https://github.com/furf/jquery-ui-touch-punch для воспроизведения в Ipad или Iphone.

Надеюсь, это поможет.

1 голос
/ 14 января 2012

У меня была похожая проблема с одним из моих проектов, но она может быть решена с помощью следующего урока: http://popdevelop.com/2010/08/touching-the-web/. Это работает для меня, я надеюсь, вам понравится.

1 голос
/ 12 января 2012

Читали ли вы верх страницы, на которую вы ссылались в документации Apple? Это говорит:

Примечание. Эта технология поддерживается только в настольных версиях Safari. Для iOS используйте DOM Touch, описанный в Обработка событий (часть Руководства по веб-контенту Safari) и Справочник по дополнениям Safari DOM.

DOM Touch link

Safari DOM Дополнения ссылка

Я полагаю, что вы, возможно, захотите слушать события касания и касания, а не перетаскивать их и перетаскивать. :)

...