为什么关注输入框和选项不适用于 bootstrap 模态？

Question

我使用 twitter bootstrap 向我的模式 window 添加了一个可拖动指令，它有一个问题，即输入文本框和 select 不能 focused/accessed.

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

这里是 plunker，

http://plnkr.co/edit/naVFDnnezpyW65DxYu4N

Answer 1

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

您阻止了默认操作的发生（在您的情况下，专注于输入）您永远不应该有一个可以从任何地方拖动并且其中包含内容的面板。你应该有一个拖动区（如标题）。

这是注释掉阻止默认值的代码：http://plnkr.co/edit/3cpq4vQADP1snHhBMLIj?p=info

但我仍然认为你应该有一个可拖动的区域而不是让整个东西都可以拖动

Answer 2

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

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

解决方案不是删除e.prevent默认设置，因为它将再次启用文本选择 ，在拖动元素时看起来很奇怪（尝试在将鼠标放在文本 CHART SETTINGS 上时拖动模式）。

变通方法：您可以定义模态框的句柄，您可以使用它来拖动模态框。例如，仅当鼠标指针位于 modal-header 时才可以拖动模式。这不会启用文本选择。

Answer 3

我重写了目录以允许仅在模态 header 标题部分拖动。此外，它还允许您在表单输入中键入内容。

angular.module('app')
    .directive('modalMovable', ['$document',
    function ($document) {
    return {
        restrict: 'AC',
        link: function (scope, iElement, iAttrs) {
            var startX = 0,
                startY = 0,
                x = 0,
                y = 0;

            dialogWrapper = angular.element(document.getElementsByClassName("modal-content"));

            dialogWrapper.css({
                position: 'relative'
            });

            dialogWrapper.on('mousedown', function (event) {
                if (event.target.classList.contains('modal-header') == false && event.target.classList.contains('modal-title') == false) {
                    return true;
                }
                startX = event.pageX - x;
                startY = event.pageY - y;
                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
            });

            function mousemove(event) {
                y = event.pageY - startY;
                x = event.pageX - startX;
                dialogWrapper.css({
                    top: y + 'px',
                    left: x + 'px'
                });
            }

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

然后添加

<div class="modal-header" modal-movable>
    <h4 class="modal-title">some title</h4>
</div>

为什么关注输入框和选项不适用于 bootstrap 模态？

why focus on input box and options does not work with bootstrap modal?

javascript

draggable

twitter-bootstrap

angularjs