javascript - 为什么关注输入框和选项不适用于 Bootstrap 模式？

Question

我使用 twitter bootstrap 向我的模态窗口添加了一个可拖动指令，它存在输入文本框和选择无法聚焦/访问的问题。

Index.Html

   <div  class=" bg-white" modaldraggable>
        <form name="_form" class="form-horizontal" ng-submit="submit(_form)">
               <div class="modal-header">
                 <h3>Chart Settings</h3>
              </div>
               <div  class="modal-body" >
               <input name="inptxt">
              </div>
              <div class="modal-footer">    
              <button ng-click="dismiss()"  class="btn btn-default" tabindex="-1"><i class="glyphicon glyphicon-remove"></i>Cancel</button>
              <button type="submit"   class="btn btn-default" ><i class="glyphicon glyphicon-ok"></i>Save</button>
              </div>
        </form>
    </div>

App.Js:

routerApp.directive('modaldraggable', function ($document) {
  "use strict";
  return function (scope, element) {
    var startX = 0,
      startY = 0,
      x = 0,
      y = 0;
     element= angular.element(document.getElementsByClassName("modal-dialog"));
     console.log("added directive");
      // element.css({
      //  position: 'fixed',
      //   cursor: 'move'
      // });

    element.on('mousedown', function (event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.screenX - x;
      startY = event.screenY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.screenY - startY;
      x = event.screenX - startX;
      element.css({
        top: y + 'px',
        left: x + 'px'
      });
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  };
});

这是个傻瓜，

http://plnkr.co/edit/naVFDnnezpyW65DxYu4N

Answer 1

jquery ui定义draggable的方式http://bugs.jqueryui.com/ticket/4945

您对 draggable 指令所做的类似事情。您已设置 event.preventDefault()，这将禁用文本选择，但也会影响可拖动模式内的输入。

解决方案不是删除 e.prevent 默认值，因为它会再次启用 textselection ，这在拖动元素时看起来很奇怪(尝试在将鼠标放在文本 CHART SETTINGS 上时拖动模式)。

解决方法:您可以定义模态框的句柄，您可以使用它来拖动模态框。例如，只有当鼠标指针位于模态标题处时，您才能拖动模态框。这不会启用文本选择。