如何在可拖动的容器中创建一个不可拖动的嵌套元素？

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