How do I prevent drag on a child, but allow drag on the parent?

user_212313 0
Viewed 23638

I have a div which the user can drag, inside that div is a span with some text which I want to allow the user to select (thus they cannot drag it). How do I allow the div to drag, but not the span?

The dragstart event is on the div.

I'm probably overlooking something simple. I tried draggable=true on the div, and draggable=false on the span. That didn't work. Tried returning false on dragstart, that didn't work either.

dragstart (roughly):

var jTarget = $(e.target);
if ((jTarget.is('div.header') || (jTarget.parents('div.header')) 
       && !jTarget.is('a, input, span'))) 
{
   e.originalEvent.dataTransfer.setData("Text", "test");
}
else
{
   if(e.preventBubble)
      e.preventBubble();
   if(e.stopPropagation)
      e.stopPropagation();
   return false;//???
}

The if else portion works as I expect, but I cannot get anything to stop the drag and allow the select.

drag-and-drop html javascript
7 Answers

If you want to truly cancel out the drag and make it unnoticeable to parent drag handlers, you need to both preventDefault and stopPropagation:

<div draggable="true" ondragstart="console.log('dragging')">
    <span>Drag me! :)</span>
    <input draggable="true"
           ondragstart="event.preventDefault();
                        event.stopPropagation();"
           value="Don't drag me :(">
</div>

Without the stopPropagation, the parent ondragstart will still be called even if the default behavior will be prevented (event.defaultPrevented == true). If you have code in that handler that doesn't handle this case, you may see subtle bugs.

You can of course put the JavaScript above inside element.addEventListener('dragstart', ...) too.

user_1190810

In my application, I was unable to get any of the other solutions listed here to work. This is what worked for me:

ondragstart="event.preventDefault();" draggable="false"

In my specific case, it was a text input inside a div.

user_10297730

I was inspired by a few of the answers here and I think I came up with the cleanest and most reusable solution. I use a mouse down event to check if the element should be draggable or not. I do this by verifying if it has a specific class name that I only assign to draggable elements. On the mouse up event, I go through all of the elements with that class tag and set their draggable values back to true.

This can break if the input node is a deep child of the draggable div, but then you can use the same algorithm as in the mouse up event and set all of the values to false.

document.addEventListener('mousedown', function (event) {
 var clickedElem = event.target;
    if(!clickedElem.classList.contains("drop_content")){
        clickedElem.parentElement.setAttribute("draggable",false);
    }
}, false);

document.addEventListener('mouseup', function () {
    var boxes = document.querySelectorAll(".drop_content");
    for(var i = 0; i < boxes.length; i++){
        boxes[i].setAttribute("draggable",true);
    }
}, false);
div{
  display:block;
  background: black;
  padding: 5px;
  margin: 2px;
}
<html>
  <body>
    <div class="drop_content" draggable="true">
      <input value="Can't drag me">
    </div>
    <div class="drop_content" draggable="true">
      <input value="Can't drag me either">
    </div>
  </body>
</html>

user_119576490

It looks like you need to set a flag that indicates whether the mouse is on the child or not. this works for me very well. if you set e.preventDefault() without condition,You will lose draggable parents.

html:

<div draggable="true" ondragstart="dragStart()">
    <span onmouseenter="childMouseEnter()" onmouseleave="childMouseLeave()">Dont 
        Drag
    </span>        
</div>

javascript:

let mouseOnChild = false
function childMouseEnter(){
    mouseOnChild = true;
}
function childMouseLeave(){
    mouseOnChild = false;
}
function dragStart(e){
    if(!mouseOnChild){
        e.preventDefault();
        e.stopPropagation();
    }
    //other operations....
}
user_104360840
Related