拖动&在 Safari iOS 上拖放:不会拖动，不会响应桌面/iPad 上的拖放

2023-02-24前端开发问题

本文介绍了拖动&在 Safari iOS 上拖放:不会拖动，不会响应桌面/iPad 上的拖放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我正在编写要在 iPad 上查看的网页.它使用 Safaris/Webkits 拖动 &降低.我已经完全复制了 Safari 的示例 drag &删除代码，但它不起作用.

I am coding a webpage to be viewed on iPad. It uses Safaris/Webkits drag & drop. I have exactly copied Safari's example drag & drop code but it won't work.

我的问题:当我在 Safari 桌面或 iPad 上的 Safari 上运行网页(HTML、CSS 和 Javascript)时，永远不会触发 ondrop 事件.在 ipad 上，我什至无法拖动元素(显微镜出现并且当我按住并将手指移动到元素上时它不会拖动).不过，拖动确实可以在桌面上工作.

My Problem: The ondrop event is never triggered when I run the webpage (HTML, CSS & Javascript) on Safari Desktop or on Safari on an iPad. On ipad I cannot even drag the elements (the microscope thingie appears & it won't drag when I hold & move my finger over the element). The drag does work on desktop though.

怎么了?

小代码示例可以在此页面的最底部找到:https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html

The small code example can be found at the very bottom of this page: 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/

Here is the JSFiddle (remember the drag & drop is Webkit so only for Safari-this webpage is for ipad only): https://jsfiddle.net/eyM3y/

相关推荐

js删除数组中指定元素的5种方法

layui 实现实时刷新一个外部的div

layui 单选框、复选框、下拉菜单不显示问题如何解决？

layui要如何改变时间日历布局大小？

JavaScript小数运算出现多位的解决办法

jQuery怎么动态向页面添加代码？

热门文章

热门精品源码

最新VIP资源

拖动&amp;在 Safari iOS 上拖放:不会拖动，不会响应桌面/iPad 上的拖放