javascript - conflict in event.dataTransfer.setData -

the datatype in event.datatransfer.setdata conflicts in firefox , ie.'text/html' not supported in ie.so suppossed use 'text'.the problem firefox not support 'text'.it supports 'text/html' or 'html' alone.any solution fix issue?

html:

    <div class="box" draggable="true">     <img src="drag icon.png" width="16" height="16"/>         <header>b</header>         <p>         put me         </p>     </div>     <div class="box" draggable="true">     <img src="drag icon.png" width="16" height="16"/>         <header>c</header>         <p>         right         </p>     </div>     <div class="box" draggable="true">     <img src="drag icon.png" width="16" height="16"/>         <header>d</header>         <p>                 </p>     </div>     <div class="box" draggable="true">     <img src="drag icon.png" width="16" height="16"/>         <header>e</header>         <p>                 </p>     </div> 

script:

  (function () {         var id_ = 'boxes-example';         var boxes_ = document.queryselectorall('#' + id_ + ' .box');         var dragsrcel_ = null;          this.handledragstart = function (e) {             e.datatransfer.effectallowed = 'move';             e.datatransfer.setdata('text/html', this.innerhtml);              dragsrcel_ = this;              this.style.opacity = '0.5';              // this/e.target source node.             this.addclassname('moving');         };          this.handledragover = function (e) {             if (e.preventdefault) {                 e.preventdefault(); // allows drop.             }              e.datatransfer.dropeffect = 'move';              return false;         };          this.handledragenter = function (e) {             this.addclassname('over');         };          this.handledragleave = function (e) {             // this/e.target previous target element.              this.removeclassname('over');         };          this.handledrop = function (e) {             // this/e.target current target element.              if (e.stoppropagation) {                 e.stoppropagation(); // stops browser redirecting.             }              // don't if we're dropping on same box we're dragging.             if (dragsrcel_ != this) {                 dragsrcel_.innerhtml = this.innerhtml;                 this.innerhtml = e.datatransfer.getdata('text/html');             }              return false;         };          this.handledragend = function (e) {             // this/e.target source node.             this.style.opacity = '1';              [ ].foreach.call(boxes_, function (box) {                 box.removeclassname('over');                 box.removeclassname('moving');             });         };          [ ].foreach.call(boxes_, function (box) {             box.setattribute('draggable', 'true');  // enable boxes draggable.             box.addeventlistener('dragstart', this.handledragstart, false);             box.addeventlistener('dragenter', this.handledragenter, false);             box.addeventlistener('dragover', this.handledragover, false);             box.addeventlistener('dragleave', this.handledragleave, false);             box.addeventlistener('drop', this.handledrop, false);             box.addeventlistener('dragend', this.handledragend, false);         });     })(); 

this sample basic html5 drag , drop code.you can take drag , drop code , check issue

try...

this.innerhtml = e.datatransfer.getdata('text') || e.datatransfer.getdata('text/html'); 

or...

try {   this.innerhtml = e.datatransfer.getdata('text'); } catch (e) {   this.innerhtml = e.datatransfer.getdata('text/html'); } 

if e.datatransfer.getdata throws exception...