mouseover and dragstart have different target

Question

I'm dealing with a html with the following format:

<a href = xxx> <div> div1 </div> <div> div2 </div> </a>

when I put my mouse over the first div, the target of my mouseover event is the div, but when I drag the div, the target becomes the tag as a whole. Is there a way to set the target of the drag to the div but not the entire link?

need more info anyways take a look to stopPropagation(); – Hamboy75 Jun 15 '17 at 19:54 — Hamboy75, Jun 15 '17 at 19:54

Dalin Huang · Accepted Answer · 2017-06-15T23:36:53.937

0

Your HTML seems invalid

REF: HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

REF: Is putting a div inside an anchor ever correct?

Add draggable="true" to the element (HTML5 feature)

draggable

The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, using the HTML Drag and Drop API. It can have the following values:

true, which indicates the element may be dragged

false, which indicates the element may not be dragged.

REF: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable

<a href="">
  <div draggable="true"> div1 </div>
</a>
<a href="">
  <div draggable="true"> div2 </div>
</a>

edited Jun 15 '17 at 23:36

answered Jun 15 '17 at 20:49

Dalin Huang

11,212
5
32
49

Thanks for the answer. But what I really want is to drag the div only but not the entire link. I added draggable = true dynamically on mouseover. – Willing Blueberry Jun 15 '17 at 21:16
@WillingBlueberry how about the updated solution? Also, the HTML you have is invalid, you should not wrap clickable element inside ``, check my updated answer for more info – Dalin Huang Jun 15 '17 at 23:38

mouseover and dragstart have different target

1 Answers1

REF: Is putting a div inside an anchor ever correct?

draggable