如何使可拖动容器中的嵌套元素不可拖动？

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事件的可能解决方案。这不是最优雅的解决方案，但它是唯一一个在Chrome和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));