CODEWITHSUNDEEP
javascriptgoogle-chromedrag-and-dropmicrosoft-edge
Normunds Kalnberzins
Normunds Kalnberzins

Reputation: 1245

drag and drop HTML between Chrome and Edge

I'm writing a small UI component that displays web links. Idea is to drag and drop link on this component, it gets url, page title and adds to the list. The source could be browser address bar, bookmark or simple link embedded in HTML page. In order to see what data I'm receiving I've written a couple of methods:

dropHandler(event){
  this.traceDataTransfer(event.dataTransfer);
  event.preventDefault();
}
traceDataTransfer(data) {
  console.log(data.types);
  data.types.forEach((t) => {
    const value = data.getData(t);
    console.log(t, value.length, value);
  });
}

dropHandler is hooked on ondrop event.

While working with only Chrome and Firefox all is working fine. Each produces/receives slightly different data, but in general I receive the data I need. Now I add Edge browser to the mix and the encoding of text/html data from Chrome breaks down.

I drag and drop a link from html page (any source page) between Chrome, Firefox and Edge. Each browser seems to process clipboard differently, so I get different data sets between different pairs. One item that is always present and the same is the url:

text/uri-list 61 https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

text/html MIME type is also always present, is slightly different depending on browser combination, but in all cases contains <a href=... >Link title</a>. In all cases except from Chrome to Edge.

Chrome to Chrome and Firefox to Edge:

 text/html 101 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a>

Chrome to Firefox:

 text/html 169 <html>
      <body>
      <!--StartFragment--><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a><!--EndFragment-->
      </body>
 </html>

Chrome to Edge:

 text/html 56 愼栠敲㵦栢瑴獰⼺搯癥汥...

Edge to Chrome is ok as well, although Edge packs all applicable styles inline:

 text/html 2053 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/dataTransfer" style="background-color: rgb(40, 92, 118); border-bottom-color: currentColor; ...

It looks like there is some encoding problem between Chrome and Edge. Say Edge treats data as UTF-8 or UTF-16 while Chrome encodes as...

Any ideas how to fix/debug this? I do not see how to enforce particular encoding.

Chrome is 80.0.3987.87 and Edge 44.17763.831.0 in case this is some kind of bug right now.

Upvotes: 1

Views: 899

Answers (1)

Yu Zhou
Yu Zhou

Reputation: 12971

I reproduced the issue on Edge Legacy. But if you want the html code of the darg element, you could put below code in dropHandler as a workaround:

var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
console.log(event.target.appendChild(document.getElementById(data))); //log the text/html part

Full example:

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dropHandler(event) {
  event.preventDefault();
  this.traceDataTransfer(event.dataTransfer);
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
  console.log(event.target.appendChild(document.getElementById(data)));
}

function traceDataTransfer(data) {
  console.log(data.types);
  data.types.forEach((t) => {
    const value = data.getData(t);
    console.log(t, value.length, value);
  });
}
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
<div id="div1" ondrop="dropHandler(event)" ondragover="allowDrop(event)"></div>
<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" id="drag1" draggable="true" ondragstart="drag(event)">DataTransfer</a>

Upvotes: 0

Related Questions