爲什麼專注於輸入框和選項不適用於引導模式？

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>