StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5 dragleave fired when hovering a child element
primarykey
Id
7110353
data
AcceptedAnswerId
0
AnswerCount
28
ClosedDate
CommentCount
8
CommunityOwnedDate
CreationDate
2011-08-18T15:53:03.873
FavoriteCount
57
LastActivityDate
2018-08-24T08:29:43.870
LastEditDate
2017-07-18T04:27:48.463
LastEditorUserId
450917
OwnerUserId
514749
ParentId
0
PostTypeId
1
Score
219
ViewCount
51172
LastEditorDisplayName
text
Body
<p>The problem I'm having is that the <code>dragleave</code> event of an element is fired when hovering a child element of that element. Also, <code>dragenter</code> is not fired when hovering back the parent element again.</p> <p>I made a simplified fiddle: <a href="http://jsfiddle.net/pimvdb/HU6Mk/1/" rel="noreferrer">http://jsfiddle.net/pimvdb/HU6Mk/1/</a>.</p> <p>HTML:</p> <pre><code><div id="drag" draggable="true">drag me</div> <hr> <div id="drop"> drop here <p>child</p> parent </div> </code></pre> <p>with the following JavaScript:</p> <pre><code>$('#drop').bind({ dragenter: function() { $(this).addClass('red'); }, dragleave: function() { $(this).removeClass('red'); } }); $('#drag').bind({ dragstart: function(e) { e.allowedEffect = "copy"; e.setData("text/plain", "test"); } }); </code></pre> <p>What it is supposed to do is notifying the user by making the drop <code>div</code> red when dragging something there. This works, but if you drag into the <code>p</code> child, the <code>dragleave</code> is fired and the <code>div</code> isn't red anymore. Moving back to the drop <code>div</code> also doesn't make it red again. It's necessary to move completely out of the drop <code>div</code> and drag back into it again to make it red.</p> <p>Is it possible to prevent <code>dragleave</code> from firing when dragging into a child element?</p> <p><strong>2017 Update:</strong> TL;DR, Look up CSS <code>pointer-events: none;</code> as described in @H.D.'s answer below that works in modern browsers and IE11.</p>
Tags
<javascript><jquery><html5><javascript-events><drag-and-drop>
Title
HTML5 dragleave fired when hovering a child element
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USGringo Suave
UserOwnerUserId
1. USpimvdb
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostLinksRelatedPostIdPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
2. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
3. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POHTML5 dragleave fired when hovering a child element
  UserUserId
  USBart Weber
  VoteTypeVoteTypeId
  VTFavorite
2. VO
  singulars
  PostPostId
  POHTML5 dragleave fired when hovering a child element
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  POHTML5 dragleave fired when hovering a child element
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.