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上拖动鼠标的模态）。

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

Answer 2

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 3

我已经重写了目录，只允许在模态标题标题部分进行拖动。此外，它允许您输入表单输入正常。

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模式？

3 个答案: