Drop div Target Events are not firing in Salesforce Object Detail Page in Chrome Updated Version 72

Question

I have a VisualForce Page (Standard Controller- Account) in Salesforce Classic which contains iframe with src of third party app html page. When page is included in Account Detail Page section. Drag drop flles was working perfectly in chrome but when chrome was updated to 72 version it stopped working. Dragging and dropping is working everywhere(Salesforce Custom VF tab, in Lightening in browsers firefox,IE, chrome<72).

The only issue case is in chrome v.72 for VisualForce Page Section in Salesorce- classic Account(Object) Detail Page.

As per my tracing, drop target events(dragenter,dragleave,dragover,drop) are not firing and there is no error in console for this.

Steps to reproduce the issue -

Write drag drop code in your app(https://< domain >/DragDrop.html) To try, simply write following code:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 100px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragenter="ondragenter()" ondragover="allowDrop(event)"></div>
<br>
 <img id="drag1" 
   src="https://openclipart.org/download/210445/misc-seed-small-brown.svg" 
   draggable="true" ondragstart="drag(event)" width="80" height="80">


</body>
</html>

Create a Visual force Page in Salesforce Classic. Add the following code -

<apex:page standardController="Account">
 <iframe id="testIframe" src="https://<domain>/DragDrop.html">
  </iframe>
</apex:page>

Go to Accounts tab, select any account, insert VF section into Account Page from edit layout. Try to run the drag drop. Screenshot - drag drop problem area

Hi! Please edit the question and add a minimal reproducible example so that others can reproduce it. Are you sure it only happens in Chrome 72? What does the developer console show? Include any errors in your question. As is, this question is probably impossible to answer. — Robert
In my app, drag and drop is working. But, when I hold Cmd button and drag & drop (to copy paste items), the drop event is not fired. It is working fine on Chrome 71, but not on Chrome 72 — Manoharan
The issue I have mentioned exists in jsFiddlle link also jsfiddle.net/westonruter/6mSuK for chrome 72. Edit the src of iframe with your app page containing drag drop. — Harleen

Harleen Harleen · Accepted Answer · 2019-02-18T09:55:23

I found the alternative solution to resolve drag drop in external web application link of iframe in Salesforce vf page that appear on Object Detail Page. The main issue was drop events were blocked in that specific iframe in chrome 72.

Instead of iframe simply assigning external app link in window.location.href as follows worked for me

<apex:page standardController="Account">
   <script>
       window.location.href="https://<domain>/DragDrop.html";   
    </script>
</apex:page>

Drop div Target Events are not firing in Salesforce Object Detail Page in Chrome Updated Version 72

1 Answers