blocks|key|262297|text|触摸事件现在也可以在Safari上运行(包括Mobile)。本文提供了一些不错的代码片段，您可以从这些代码片段开始：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262298|http://www.html5rocks.com/en/mobile/touch/|offset|length|262299|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Touch events do work now on Safari too (including Mobile). This article has nice code snippets that you can start from:

<a href="http://www.html5rocks.com/en/mobile/touch/" rel="nofollow">http://www.html5rocks.com/en/mobile/touch/</a>

blocks|key|3167701|text|我发现了这段非常有用的javascript代码，它为您添加了iOS事件填充：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3167702|https://github.com/timruffles/ios-html5-drag-drop-shim|offset|length|3167703|完成代码，以防代码在将来某个时候被删除(这种情况经常发生)：|3167704|(function(doc)+{

++log+=+noop;+//+noOp,+remove+this+line+to+enable+debugging

++var+coordinateSystemForElementFromPoint;

++function+main(config)+{
++++config+=+config+%7C%7C+{};

++++coordinateSystemForElementFromPoint+=+navigator.userAgent.match(/OS+5(?:_\d%2B)%2B+like+Mac/)+?+"client"+:+"page";

++++var+div+=+doc.createElement('div');
++++var+dragDiv+=+'draggable'+in+div;
++++var+evts+=+'ondragstart'+in+div+&&+'ondrop'+in+div;

++++var+needsPatch+=+!(dragDiv+%7C%7C+evts)+%7C%7C+/iPad%7CiPhone%7CiPod/.test(navigator.userAgent);
++++log((needsPatch+?+""+:+"not+")+%2B+"patching+html5+drag+drop");

++++if(!needsPatch)+return;

++++if(!config.enableEnterLeave)+{
++++++DragDrop.prototype.synthesizeEnterLeave+=+noop;
++++}

++++doc.addEventListener("touchstart",+touchstart);
++}

++function+DragDrop(event,+el)+{

++++this.touchPositions+=+{};
++++this.dragData+=+{};
++++this.el+=+el+%7C%7C+event.target

++++event.preventDefault();

++++log("dragstart");

++++this.dispatchDragStart()
++++this.elTranslation+=+readTransform(this.el);

++++this.listen()

++}

++DragDrop.prototype+=+{
++++listen:+function()+{
++++++var+move+=+onEvt(doc,+"touchmove",+this.move,+this);
++++++var+end+=+onEvt(doc,+"touchend",+ontouchend,+this);
++++++var+cancel+=+onEvt(doc,+"touchcancel",+cleanup,+this);

++++++function+ontouchend(event)+{
++++++++this.dragend(event,+event.target);
++++++++cleanup();
++++++}
++++++function+cleanup()+{
++++++++log("cleanup");
++++++++this.touchPositions+=+{};
++++++++this.el+=+this.dragData+=+null;
++++++++return+[move,+end,+cancel].forEach(function(handler)+{
++++++++++return+handler.off();
++++++++});
++++++}
++++},
++++move:+function(event)+{
++++++var+deltas+=+{+x:+[],+y:+[]+};

++++++[].forEach.call(event.changedTouches,function(touch,+index)+{
++++++++var+lastPosition+=+this.touchPositions[index];
++++++++if+(lastPosition)+{
++++++++++deltas.x.push(touch.pageX+-+lastPosition.x);
++++++++++deltas.y.push(touch.pageY+-+lastPosition.y);
++++++++}+else+{
++++++++++this.touchPositions[index]+=+lastPosition+=+{};
++++++++}
++++++++lastPosition.x+=+touch.pageX;
++++++++lastPosition.y+=+touch.pageY;
++++++}.bind(this))

++++++this.elTranslation.x+%2B=+average(deltas.x);
++++++this.elTranslation.y+%2B=+average(deltas.y);
++++++this.el.style["z-index"]+=+"999999";
++++++this.el.style["pointer-events"]+=+"none";
++++++writeTransform(this.el,+this.elTranslation.x,+this.elTranslation.y);

++++++this.synthesizeEnterLeave(event);
++++},
++++synthesizeEnterLeave:+function(event)+{
++++++var+target+=+elementFromTouchEvent(this.el,event)
++++++if+(target+!=+this.lastEnter)+{
++++++++if+(this.lastEnter)+{
++++++++++this.dispatchLeave();
++++++++}
++++++++this.lastEnter+=+target;
++++++++this.dispatchEnter();
++++++}
++++},
++++dragend:+function(event)+{

++++++//+we'll+dispatch+drop+if+there's+a+target,+then+dragEnd.+If+drop+isn't+fired
++++++//+or+isn't+cancelled,+we'll+snap+back
++++++//+drop+comes+first+http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#drag-and-drop-processing-model
++++++log("dragend");

++++++if+(this.lastEnter)+{
++++++++this.dispatchLeave();
++++++}

++++++var+target+=+elementFromTouchEvent(this.el,event)

++++++if+(target)+{
++++++++log("found+drop+target+"+%2B+target.tagName);
++++++++this.dispatchDrop(target)
++++++}+else+{
++++++++log("no+drop+target,+scheduling+snapBack")
++++++++once(doc,+"dragend",+this.snapBack,+this);
++++++}

++++++var+dragendEvt+=+doc.createEvent("Event");
++++++dragendEvt.initEvent("dragend",+true,+true);
++++++this.el.dispatchEvent(dragendEvt);
++++},
++++dispatchDrop:+function(target)+{
++++++var+snapBack+=+true;

++++++var+dropEvt+=+doc.createEvent("Event");
++++++dropEvt.initEvent("drop",+true,+true);
++++++dropEvt.dataTransfer+=+{
++++++++getData:+function(type)+{
++++++++++return+this.dragData[type];
++++++++}.bind(this)
++++++};
++++++dropEvt.preventDefault+=+function()+{
+++++++++//+https://www.w3.org/Bugs/Public/show_bug.cgi?id=14638+-+if+we+don't+cancel+it,+we'll+snap+back
++++++++this.el.style["z-index"]+=+"";
++++++++this.el.style["pointer-events"]+=+"auto";
++++++++snapBack+=+false;
++++++++writeTransform(this.el,+0,+0);
++++++}.bind(this);

++++++once(doc,+"drop",+function()+{
++++++++log("drop+event+not+canceled");
++++++++if+(snapBack)+this.snapBack()
++++++},this);

++++++target.dispatchEvent(dropEvt);
++++},
++++dispatchEnter:+function()+{

++++++var+enterEvt+=+doc.createEvent("Event");
++++++enterEvt.initEvent("dragenter",+true,+true);
++++++enterEvt.dataTransfer+=+{
++++++++getData:+function(type)+{
++++++++++return+this.dragData[type];
++++++++}.bind(this)
++++++};

++++++this.lastEnter.dispatchEvent(enterEvt);
++++},
++++dispatchLeave:+function()+{

++++++var+leaveEvt+=+doc.createEvent("Event");
++++++leaveEvt.initEvent("dragleave",+true,+true);
++++++leaveEvt.dataTransfer+=+{
++++++++getData:+function(type)+{
++++++++++return+this.dragData[type];
++++++++}.bind(this)
++++++};

++++++this.lastEnter.dispatchEvent(leaveEvt);
++++++this.lastEnter+=+null;
++++},
++++snapBack:+function()+{
++++++once(this.el,+"webkitTransitionEnd",+function()+{
++++++++this.el.style["pointer-events"]+=+"auto";
++++++++this.el.style["z-index"]+=+"";
++++++++this.el.style["-webkit-transition"]+=+"none";
++++++},this);
++++++setTimeout(function()+{
++++++++this.el.style["-webkit-transition"]+=+"all+0.2s";
++++++++writeTransform(this.el,+0,+0)
++++++}.bind(this));
++++},
++++dispatchDragStart:+function()+{
++++++var+evt+=+doc.createEvent("Event");
++++++evt.initEvent("dragstart",+true,+true);
++++++evt.dataTransfer+=+{
++++++++setData:+function(type,+val)+{
++++++++++this.dragData[type]+=+val;
++++++++++return+val;
++++++++}.bind(this),
++++++++dropEffect:+"move"
++++++};
++++++this.el.dispatchEvent(evt);
++++}
++}

++//+event+listeners
++function+touchstart(evt)+{
++++var+el+=+evt.target;
++++do+{
++++++if+(el.hasAttribute("draggable"))+{
++++++++evt.preventDefault();
++++++++new+DragDrop(evt,el);
++++++}
++++}+while((el+=+el.parentNode)+&&+el+!==+doc.body)
++}

++//+DOM+helpers
++function+elementFromTouchEvent(el,event)+{
++++var+touch+=+event.changedTouches[0];
++++var+target+=+doc.elementFromPoint(
++++++touch[coordinateSystemForElementFromPoint+%2B+"X"],
++++++touch[coordinateSystemForElementFromPoint+%2B+"Y"]
++++);
++++return+target
++}

++function+readTransform(el)+{
++++var+transform+=+el.style["-webkit-transform"];
++++var+x+=+0
++++var+y+=+0
++++var+match+=+/translate$\s*(\d%2B)[%5E,]*,\D*(\d%2B)/.exec(transform)
++++if(match)+{
++++++x+=+parseInt(match[1],10)
++++++y+=+parseInt(match[2],10)
++++}
++++return+{+x:+x,+y:+y+};
++}

++function+writeTransform(el,+x,+y)+{
++++var+transform+=+el.style["-webkit-transform"].replace(/translate\(\D*\d%2B[%5E,]*,\D*\d%2B[%5E,]*$\s*/g,+'');
++++el.style["-webkit-transform"]+=+transform+%2B+"+translate("+%2B+x+%2B+"px,"+%2B+y+%2B+"px)";
++}

++function+onEvt(el,+event,+handler,+context)+{
++++if(context)+handler+=+handler.bind(context)
++++el.addEventListener(event,+handler);
++++return+{
++++++off:+function()+{
++++++++return+el.removeEventListener(event,+handler);
++++++}
++++};
++}

++function+once(el,+event,+handler,+context)+{
++++if(context)+handler+=+handler.bind(context)
++++function+listener(evt)+{
++++++handler(evt);
++++++return+el.removeEventListener(event,listener);
++++}
++++return+el.addEventListener(event,listener);
++}


++//+general+helpers
++function+log(msg)+{
++++console.log(msg);
++}

++function+average(arr)+{
++++if+(arr.length+===+0)+return+0;
++++return+arr.reduce((function(s,+v)+{
++++++return+v+%2B+s;
++++}),+0)+/+arr.length;
++}

++function+noop()+{}

++main(window.iosDragDropShim);


})(document);|code-block|syntax|javascript|3167705|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

I found this incredibly useful javascript code that adds the iOS event shims for you:

<a href="https://github.com/timruffles/ios-html5-drag-drop-shim" rel="noreferrer">https://github.com/timruffles/ios-html5-drag-drop-shim</a>

Complete code just in case the code is deleted sometime in the future (it happens too often):

<pre><code>(function(doc) {

 log = noop; // noOp, remove this line to enable debugging

 var coordinateSystemForElementFromPoint;

 function main(config) {
 config = config || {};

 coordinateSystemForElementFromPoint = navigator.userAgent.match(/OS 5(?:_\d+)+ like Mac/) ? "client" : "page";

 var div = doc.createElement('div');
 var dragDiv = 'draggable' in div;
 var evts = 'ondragstart' in div &amp;&amp; 'ondrop' in div;

 var needsPatch = !(dragDiv || evts) || /iPad|iPhone|iPod/.test(navigator.userAgent);
 log((needsPatch ? "" : "not ") + "patching html5 drag drop");

 if(!needsPatch) return;

 if(!config.enableEnterLeave) {
 DragDrop.prototype.synthesizeEnterLeave = noop;
 }

 doc.addEventListener("touchstart", touchstart);
 }

 function DragDrop(event, el) {

 this.touchPositions = {};
 this.dragData = {};
 this.el = el || event.target

 event.preventDefault();

 log("dragstart");

 this.dispatchDragStart()
 this.elTranslation = readTransform(this.el);

 this.listen()

 }

 DragDrop.prototype = {
 listen: function() {
 var move = onEvt(doc, "touchmove", this.move, this);
 var end = onEvt(doc, "touchend", ontouchend, this);
 var cancel = onEvt(doc, "touchcancel", cleanup, this);

 function ontouchend(event) {
 this.dragend(event, event.target);
 cleanup();
 }
 function cleanup() {
 log("cleanup");
 this.touchPositions = {};
 this.el = this.dragData = null;
 return [move, end, cancel].forEach(function(handler) {
 return handler.off();
 });
 }
 },
 move: function(event) {
 var deltas = { x: [], y: [] };

 [].forEach.call(event.changedTouches,function(touch, index) {
 var lastPosition = this.touchPositions[index];
 if (lastPosition) {
 deltas.x.push(touch.pageX - lastPosition.x);
 deltas.y.push(touch.pageY - lastPosition.y);
 } else {
 this.touchPositions[index] = lastPosition = {};
 }
 lastPosition.x = touch.pageX;
 lastPosition.y = touch.pageY;
 }.bind(this))

 this.elTranslation.x += average(deltas.x);
 this.elTranslation.y += average(deltas.y);
 this.el.style["z-index"] = "999999";
 this.el.style["pointer-events"] = "none";
 writeTransform(this.el, this.elTranslation.x, this.elTranslation.y);

 this.synthesizeEnterLeave(event);
 },
 synthesizeEnterLeave: function(event) {
 var target = elementFromTouchEvent(this.el,event)
 if (target != this.lastEnter) {
 if (this.lastEnter) {
 this.dispatchLeave();
 }
 this.lastEnter = target;
 this.dispatchEnter();
 }
 },
 dragend: function(event) {

 // we'll dispatch drop if there's a target, then dragEnd. If drop isn't fired
 // or isn't cancelled, we'll snap back
 // drop comes first http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#drag-and-drop-processing-model
 log("dragend");

 if (this.lastEnter) {
 this.dispatchLeave();
 }

 var target = elementFromTouchEvent(this.el,event)

 if (target) {
 log("found drop target " + target.tagName);
 this.dispatchDrop(target)
 } else {
 log("no drop target, scheduling snapBack")
 once(doc, "dragend", this.snapBack, this);
 }

 var dragendEvt = doc.createEvent("Event");
 dragendEvt.initEvent("dragend", true, true);
 this.el.dispatchEvent(dragendEvt);
 },
 dispatchDrop: function(target) {
 var snapBack = true;

 var dropEvt = doc.createEvent("Event");
 dropEvt.initEvent("drop", true, true);
 dropEvt.dataTransfer = {
 getData: function(type) {
 return this.dragData[type];
 }.bind(this)
 };
 dropEvt.preventDefault = function() {
 // https://www.w3.org/Bugs/Public/show_bug.cgi?id=14638 - if we don't cancel it, we'll snap back
 this.el.style["z-index"] = "";
 this.el.style["pointer-events"] = "auto";
 snapBack = false;
 writeTransform(this.el, 0, 0);
 }.bind(this);

 once(doc, "drop", function() {
 log("drop event not canceled");
 if (snapBack) this.snapBack()
 },this);

 target.dispatchEvent(dropEvt);
 },
 dispatchEnter: function() {

 var enterEvt = doc.createEvent("Event");
 enterEvt.initEvent("dragenter", true, true);
 enterEvt.dataTransfer = {
 getData: function(type) {
 return this.dragData[type];
 }.bind(this)
 };

 this.lastEnter.dispatchEvent(enterEvt);
 },
 dispatchLeave: function() {

 var leaveEvt = doc.createEvent("Event");
 leaveEvt.initEvent("dragleave", true, true);
 leaveEvt.dataTransfer = {
 getData: function(type) {
 return this.dragData[type];
 }.bind(this)
 };

 this.lastEnter.dispatchEvent(leaveEvt);
 this.lastEnter = null;
 },
 snapBack: function() {
 once(this.el, "webkitTransitionEnd", function() {
 this.el.style["pointer-events"] = "auto";
 this.el.style["z-index"] = "";
 this.el.style["-webkit-transition"] = "none";
 },this);
 setTimeout(function() {
 this.el.style["-webkit-transition"] = "all 0.2s";
 writeTransform(this.el, 0, 0)
 }.bind(this));
 },
 dispatchDragStart: function() {
 var evt = doc.createEvent("Event");
 evt.initEvent("dragstart", true, true);
 evt.dataTransfer = {
 setData: function(type, val) {
 this.dragData[type] = val;
 return val;
 }.bind(this),
 dropEffect: "move"
 };
 this.el.dispatchEvent(evt);
 }
 }

 // event listeners
 function touchstart(evt) {
 var el = evt.target;
 do {
 if (el.hasAttribute("draggable")) {
 evt.preventDefault();
 new DragDrop(evt,el);
 }
 } while((el = el.parentNode) &amp;&amp; el !== doc.body)
 }

 // DOM helpers
 function elementFromTouchEvent(el,event) {
 var touch = event.changedTouches[0];
 var target = doc.elementFromPoint(
 touch[coordinateSystemForElementFromPoint + "X"],
 touch[coordinateSystemForElementFromPoint + "Y"]
 );
 return target
 }

 function readTransform(el) {
 var transform = el.style["-webkit-transform"];
 var x = 0
 var y = 0
 var match = /translate$\s*(\d+)[^,]*,\D*(\d+)/.exec(transform)
 if(match) {
 x = parseInt(match[1],10)
 y = parseInt(match[2],10)
 }
 return { x: x, y: y };
 }

 function writeTransform(el, x, y) {
 var transform = el.style["-webkit-transform"].replace(/translate\(\D*\d+[^,]*,\D*\d+[^,]*$\s*/g, '');
 el.style["-webkit-transform"] = transform + " translate(" + x + "px," + y + "px)";
 }

 function onEvt(el, event, handler, context) {
 if(context) handler = handler.bind(context)
 el.addEventListener(event, handler);
 return {
 off: function() {
 return el.removeEventListener(event, handler);
 }
 };
 }

 function once(el, event, handler, context) {
 if(context) handler = handler.bind(context)
 function listener(evt) {
 handler(evt);
 return el.removeEventListener(event,listener);
 }
 return el.addEventListener(event,listener);
 }


 // general helpers
 function log(msg) {
 console.log(msg);
 }

 function average(arr) {
 if (arr.length === 0) return 0;
 return arr.reduce((function(s, v) {
 return v + s;
 }), 0) / arr.length;
 }

 function noop() {}

 main(window.iosDragDropShim);


})(document);
</code></pre>

blocks|key|3167751|text|我一直在尝试在ios+safari+(ipad+pro版本14.0.1)中使用本机拖放功能，我正在更新这个答案，因为它一直是我的第一个google搜索结果(似乎没有其他的问答是最新的)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3167752|在https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html之后，我发现safari中的原生html5拖放现在可以工作，但有一些特别的注意事项；|offset|length|3167753|你必须在OnDragStart的|3167754|中设置一些数据；(效果设置似乎是可选的)+Event.dataTransfer.setData('text/plain',+'hello');|unordered-list-item|style|CODE|3167755|3167756|3167757|你必须Event.preventDefault();+in+OnDrop，否则safari会加载你添加的数据(除非你是故意的)|3167758|3167759|3167760|OnDragOver事件处理程序需要Event.preventDefault();，否则drop+fails+(除非有意，如文档所述)|3167761|3167762|在ios+safari上，如果你设置了OnDragStart的Event.dataTransfer.dropEffect='copy'和OnDragOver的Event.dataTransfer.dropEffect='link'，那么drop就会失败(no+OnDrop())；这似乎是失败的唯一组合|3167763|我以为你需要|3167764|3167765|CSS+-webkit-user-drag:+Element;和`-webkit-user-drop:+element；或者如果您更喜欢|3167766|3167767|Element.style.setProperty('webkitUserDrag','element');
Element.style.setProperty('webkitUserDrop','element');|code-block|syntax|javascript|3167768|但是看起来仅仅是常用的draggable属性就足够了Element.setAttribute('draggable',true);|3167769|这似乎是拖放元素的最小要求|3167770|++++++++Element.setAttribute('draggable',true);
++++++++
++++++++function+OnDragOver(Event)
++++++++{
++++++++++++Element.setAttribute('DragOver',true);
++++++++++++Event.stopPropagation();++++//++let+child+accept+and+don't+pass+up+to+parent+element
++++++++++++Event.preventDefault();+++++//++ios+to+accept+drop
++++++++++++Event.dataTransfer.dropEffect+=+'copy';//+++move+has+no+icon?+adding+copy+shows+%2B
++++++++}
++++++++function+OnDragLeave(Event)
++++++++{
++++++++++++Element.removeAttribute('DragOver');
++++++++}
++++++++function+OnDrop(Event)
++++++++{
++++++++++++Element.removeAttribute('DragOver');
++++++++++++Event.preventDefault();+++++//++dont+let+page+attempt+to+load+our+data
++++++++++++Event.stopPropagation();
++++++++}
++++++++function+OnDragStart(Event)
++++++++{
++++++++++++Event.stopPropagation();+//+let+child+take+the+drag
++++++++++++Event.dataTransfer.dropEffect+=+'move';
++++++++++++Event.dataTransfer.setData('text/plain',+'hello');
++++++++}
++++++++Element.addEventListener('dragstart',OnDragStart);
++++++++Element.addEventListener('drop',OnDrop);
++++++++Element.addEventListener('dragover',OnDragOver);
++++++++Element.addEventListener('dragleave',OnDragLeave);|3167771|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html^0|0|1|3E|0|0|0|L|1E|0|0|0|3|N|U|6|0|0|0|0|A|I|N|0|0|J|B|V|10|1W|A|27|10|3M|8|0|0|0|4|R|0|0|0|B|9|Q|13|0|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1N|8|@]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|F|3|G|5|6|7|1R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1S|8|@$D|1T|E|1U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1X|8|@$D|1Y|E|1Z|K|L]|$D|20|E|21|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|24|8|@$D|25|E|26|K|L]|$D|27|E|28|K|L]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|29|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|2A|8|@$D|2B|E|2C|K|L]|$D|2D|E|2E|K|L]|$D|2F|E|2G|K|L]|$D|2H|E|2I|K|L]|$D|2J|E|2K|K|L]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2L|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|10|3|11|5|J|7|2N|8|@$D|2O|E|2P|K|L]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|13|3|14|5|15|7|2R|8|@]|9|@]|A|$16|17]]|$1|18|3|19|5|6|7|2S|8|@$D|2T|E|2U|K|L]|$D|2V|E|2W|K|L]]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2X|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|15|7|2Y|8|@]|9|@]|A|$16|17]]|$1|1E|3|-4|5|6|7|2Z|8|@]|9|@]|A|$]]]|1F|$1G|$5|1H|1I|1J|A|$1K|1L]]]]

I've just been trying to get native drag&amp;drop working in ios safari (ipad pro with 14.0.1), and I'm updating this answer as it kept coming up as my first google result (and no other q&amp;a seems to be up to date).
Following <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html" rel="nofollow noreferrer">https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html</a>
I have found native html5 drag&amp;drop now works in safari, with a few specific notes;
<ul>
<li>You MUST set some data in OnDragStart's event; (the effect settings seem to be optional) <code>Event.dataTransfer.setData('text/plain', 'hello');</code>
</li>
<li>you MUST <code>Event.preventDefault();</code> in <code>OnDrop</code> otherwise safari will load the data you added (unless that's your intention)
</li>
<li><code>OnDragOver</code> event handler needs <code>Event.preventDefault();</code> otherwise drop fails (unless intended, as docuemnted)
</li>
<li>On ios safari, if you set <code>OnDragStart</code>'s <code>Event.dataTransfer.dropEffect='copy'</code> and in <code>OnDragOver</code>'s <code>Event.dataTransfer.dropEffect='link'</code> the drop fails (no <code>OnDrop()</code>); Seems to be the only combination that fails
</li>
</ul>
I thought you required
<ul>
<li>CSS <code>-webkit-user-drag: Element;</code> and `-webkit-user-drop: element;
or if you prefer</li>
</ul>
<pre><code>Element.style.setProperty('webkitUserDrag','element');
Element.style.setProperty('webkitUserDrop','element');
</code></pre>
but it seems just the usual <code>draggable</code> attribute is enough
<code>Element.setAttribute('draggable',true);</code>
This seems to be the bare minimum to drag &amp; drop an element
<pre><code> Element.setAttribute('draggable',true);
 
 function OnDragOver(Event)
 {
 Element.setAttribute('DragOver',true);
 Event.stopPropagation(); // let child accept and don't pass up to parent element
 Event.preventDefault(); // ios to accept drop
 Event.dataTransfer.dropEffect = 'copy';// move has no icon? adding copy shows +
 }
 function OnDragLeave(Event)
 {
 Element.removeAttribute('DragOver');
 }
 function OnDrop(Event)
 {
 Element.removeAttribute('DragOver');
 Event.preventDefault(); // dont let page attempt to load our data
 Event.stopPropagation();
 }
 function OnDragStart(Event)
 {
 Event.stopPropagation(); // let child take the drag
 Event.dataTransfer.dropEffect = 'move';
 Event.dataTransfer.setData('text/plain', 'hello');
 }
 Element.addEventListener('dragstart',OnDragStart);
 Element.addEventListener('drop',OnDrop);
 Element.addEventListener('dragover',OnDragOver);
 Element.addEventListener('dragleave',OnDragLeave);
</code></pre>

I've successfully implemented native HTML5 Drag and Drop for moving HTML elements inside a page (just, say, a div from one place to another, nothing related to interacting with the host OS' files whatsoever). This works fine in Chrome and Safari on a PC but I can't start a drag operation in my iPad's Safari.

I've found this so far:

<blockquote>
 Using Drag and Drop From JavaScript
 
 Safari, Dashboard, and WebKit-based
 applications include support for
 customizing the behavior of drag and
 drop operations within your HTML
 pages.
 
 Note: This technology is supported
 only on desktop versions of Safari.
 For iPhone OS, use DOM Touch,
 described in Handling Events (part of
 Safari Web Content Guide) and Safari
 DOM Additions Reference.
</blockquote>

<a href="http://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html" rel="noreferrer">Here</a>. But it's outdated (2009-06-08).

Doe's anyone know if it is possible to use native HTML5 in Mobile Safari? (I don't want javascript-framework like solutions like jQuery UI).

Thanks!

Native HTML5 Drag and Drop in Mobile Safari (iPad, iPod, iPhone)?

jQuery

HTML5

我已经成功地实现了原生HTML5拖放，用于在页面中移动元素(比如说，从一个位置到另一个位置的div，与与主机操作系统文件的交互无关)。这在个人电脑上的Chrome和Safari上运行得很好，但我不能在iPad的Safari上启动拖动操作。到目前为止，我发现了这个：使用JavaScript中的拖放进行基于Safari、D...

问原生HTML5在Mobile Safari (iPad，iPod，iPhone)中的拖放？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问原生HTML5在Mobile Safari (iPad，iPod，iPhone)中的拖放？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问原生HTML5在Mobile Safari (iPad，iPod，iPhone)中的拖放？
EN