5

親コンテナーで HTML5 ドラッグ アンド ドロップを使用していますが、ユーザーが入力コンテンツを簡単に選択/編集できるように、一部の子、特に入力でドラッグ効果を無効にしたいと考えています。

例: https://jsfiddle.net/Luzub54b/

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

Safari はデフォルトで入力に対してこれを行うようですので、Chrome または Firefox で試してください。

4

1 に答える 1

2

私は似たようなものを探していて、mousedown および mouseup イベントを使用して可能な解決策を見つけました。これは最もエレガントなソリューションではありませんが、Chrome と Firefox の両方で一貫して機能する唯一のソリューションです。

私はあなたのフィドルにいくつかのjavascriptを追加しました: フィドル

;
(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));
于 2016-03-26T16:55:14.340 に答える