IE supports the HTML5 File API

JavascriptWeb DevelopmentFront End Scripts

<p>IE9 does not support File API</p><p>IF10 started supported File API</p><p style="">An example of that would be drag and drop. Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.</p><pre class="prettyprint notranslate">&lt;!DOCTYPE HTML&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#boxA { background-color: #6633FF; width:75px; height:75px; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#boxB { background-color: #FF6699; width:150px; height:150px; } &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp; &nbsp; &lt;script&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function dragStart(ev) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ev.dataTransfer.effectAllowed=&#39;move&#39;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ev.dataTransfer.setData(&quot;Text&quot;, ev.target.getAttribute(&#39;id&#39;)); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ev.dataTransfer.setDragImage(ev.target,0,0); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/script&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;center&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h2&gt;Drag and drop HTML5 demo&lt;/h2&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Try to drag the purple box around.&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div id = &quot;boxA&quot; draggable = &quot;true&quot; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ondragstart = &quot;return dragStart(ev)&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Drag Me&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div id = &quot;boxB&quot;&gt;Dustbin&lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/center&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 27-Jan-2020 08:07:43

Advertisements