Как сделать вложенный элемент не перетаскиваемым в перетаскиваемый контейнер?

Question

Я использую перетаскивание HTML5 в родительском контейнере, но я хочу отключить эффект перетаскивания на некоторые из его дочерних элементов, в частности вход, чтобы пользователи могли легко выбирать/редактировать входной контент.

Пример: https://jsfiddle.net/Luzub54b/

<div class="parent" draggable="true"> 
    <input class="child" type="text" value="22.99"/> 
</div> 

Safari, кажется, делает это для входов по умолчанию, поэтому попробовать его на Chrome или Firefox.

Answer 1

Я искал что-то подобное и нашел возможное решение, используя события mousedown и mouseup. Это не самое элегантное решение, но это единственное, что работает для меня как на хроме, так и на firefox.

я добавил JavaScript в вашу скрипку: Fiddle

; 
(function($) { 

    // DOM Ready 
    $(function() { 
    $('input').on('mousedown', function(e) { 
     e.stopPropagation(); 
     $('div.parent').attr('draggable', false); 
    }); 

    $(window).on('mouseup', function(e) { 
     $('div.parent').attr('draggable', true); 
    }); 

    /** 
    * Added the dragstart event handler cause 
    * firefox wouldn't show the effects otherwise 
    **/ 
    $('div.parent').on({ 
     'dragstart': function(e) { 
     e.stopPropagation(); 
     var dt = e.originalEvent.dataTransfer; 
     if (dt) { 
      dt.effectAllowed = 'move'; 
      dt.setData('text/html', ''); 
     } 
     } 
    }); 
    }); 
}(jQuery));