Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I tried the accepted solution here, but ended up using setTimeout to overcome the issue. I was having a ton of trouble with the page-wide container blocking the drop element if it was floated on top, and still causing the problem if it was the drop element.</p> <pre><code>&lt;body style="border: 1px solid black;"&gt; &lt;div id="d0" style="border: 1px solid black;"&gt;&amp;nbsp;&lt;/div&gt; &lt;div id="d1" style="border: 1px solid black; display: none; background-color: red;"&gt;-&amp;gt; drop here &amp;lt;-&lt;/div&gt; &lt;div id="d2" style="border: 1px solid black;"&gt;&amp;nbsp;&lt;/div&gt; &lt;div style="float: left;"&gt;other element&lt;/div&gt; &lt;div style="float: left;"&gt;&amp;nbsp;-&amp;nbsp;&lt;/div&gt; &lt;div style="float: left;"&gt;another element&lt;/div&gt; &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; &lt;/body&gt; &lt;script type="text/javascript"&gt; var resetTimer; var f = function(e) { if (e.type == "dragover") { e.stopPropagation(); e.preventDefault(); if (resetTimer) { clearTimeout(resetTimer); } document.getElementById('d1').style.display = ''; } else { var f = function() { document.getElementById('d1').style.display = 'none'; }; resetTimer = window.setTimeout(f, 25); } }; document.body.addEventListener("dragover", f, true); document.body.addEventListener("dragleave", f, true); document.getElementById('d1').addEventListener("drop", function(e){ f(); alert('dropped'); }, false); &lt;/script&gt; </code></pre> <p>If you were to just call <code>f();</code> instead of <code>window.setTimeout(f, 250);</code>, you'll see some nasty flickering of the element showing and hiding.</p> <p><strong>http://jsfiddle.net/guYWx/</strong></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload