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

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));