Как предотвратить перетаскивание дочернего элемента, но разрешить перетаскивание родительского элемента?

Question

У меня есть div, который пользователь может перетаскивать, внутри этого div есть интервал с некоторым текстом, который я хочу разрешить пользователю выбирать (таким образом, они не могут его перетаскивать).Как мне разрешить перетаскивать div, но не span?

Событие dragstart находится на div.

Я, наверное, пропускаю что-то простое.Я попытался draggable = true на div, и draggable = false на span.Это не сработало.Попытался вернуть false на dragstart, но это тоже не сработало.

dragstart (примерно):

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;//???
}

Часть if else работает так, как я ожидаю, но я не могу заставить ничего остановитьперетащите и позвольте выбор.

Answer 1

просто сообщение на тот случай, если кто-то ищет его с похожей проблемой

element.addEventListener('mousedown', function() { this.parentNode.setAttribute("draggable", false); });
element.addEventListener('mouseup', function() { this.parentNode.setAttribute("draggable", true); });

работал для меня

Answer 2

Если вы хотите действительно отменить перетаскивание и сделать его незаметным для родительских обработчиков перетаскивания, вам нужно либо preventDefault, либо 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>

Без stopPropagation родительский ondragstart будет по-прежнему вызываться, даже если поведение по умолчанию будет запрещено (event.defaultPrevented == true). Если у вас есть код в этом обработчике, который не обрабатывает этот случай, вы можете увидеть незначительные ошибки.

Конечно, вы можете поместить вышеупомянутый JavaScript внутри element.addEventListener('dragstart', ...).

Answer 3

Вы можете изменить дочерний элемент на перетаскиваемый и запретить использование по умолчанию при ondragstart, это оставит обычное поведение для дочернего элемента, и родительский элемент все еще будет перетаскиваемым

function drag(e){ if(e.target.type=="range")e.preventDefault();/*rest of your code*/  }

HTML:

<input type="range" draggable="true" ondragstart="drag(event)">

Answer 4

Поместите обработчик mousedown на span и остановите там распространение события.

Answer 5

В моем приложении мне не удалось заставить работать другие решения, перечисленные здесь. Вот что у меня сработало:

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

В моем конкретном случае это был ввод текста внутри div.