拖动&在Safari iOS上下载:赢得't拖动，赢得'在台式机/iPad上没有响应

Drag & Drop on Safari iOS: Won't drag, won't respond to drop on desktop/iPad

本文关键字：赢得 拖动 响应 台式机 iPad Safari amp iOS 下载      更新时间：2023-09-26

我正在编写一个要在iPad上查看的网页。它使用Safaris/Webkit拖拽&滴我已经完全复制了Safari的示例拖动&删除代码，但不起作用。

我的问题：当我在Safari Desktop或iPad上的Safari上运行网页（HTML、CSS和Javascript）时，从未触发ondrop事件。在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（请记住拖放是Webkit，因此仅适用于Safari，此网页仅适用于ipad）：https://jsfiddle.net/eyM3y/

工作替代方案：

首先，使用jquery UIhttp://jqueryui.com/demos/用于拖放功能

然后添加此脚本https://github.com/furf/jquery-ui-touch-punch用于在Ipad或Iphone中播放。

希望能有所帮助。

你读过苹果文档中链接到的页面顶部吗？上面写着：

注意：此技术仅在Safari的桌面版本上受支持。对于iOS，请使用DOM Touch，如处理事件（Safari Web内容指南的一部分）和Safari DOM Additions Reference中所述。

DOM触摸链接

Safari DOM添加链接

我相信你可能想听听触摸移动和触摸结束事件，而不是拖放。：）

我的一个项目也遇到了类似的问题，但可以通过以下教程解决：http://popdevelop.com/2010/08/touching-the-web/。它对我有用，我希望你会喜欢它。

相关文章：