为什么专注于输入框和选项不适用于引导模式？

Question

我使用twitter引导向我的模式窗口添加了一个可拖动的指令，它有一个问题，即输入文本框和选择无法被聚焦/访问。

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

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

你用你的可拖动指令做了类似的事情。你已经设置了event.preventDefault（），它将禁用文本选择，但也会影响可拖动模式中的输入。

该解决方案将不删除e.prevent默认，因为它会重新启用textselection，这看起来怪怪的同时拖动元素（尝试拖动模式，而鼠标上的文字图表设置）。

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

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>