javascript - 为什么我最外层加个拖拽的指令draggable 之后里面输入框就不能输入了

Question

直接需求的图

我这个是弹出框，我封装了个拖拽的指令···加进去之后我的搜索输入框无法输入是为什么？？

        //拖拽
        app.directive('draggable',['$document','$window', function($document,$window) {
          return {
              restrict:'AE',
            link: function(scope, element, attr) {
                  var startX = 0, startY = 0;
                  var x = $(element).offset().left+$(element).width()/2, y = $(element).offset().top-45;
                  var maxY = $window.innerHeight-$(element).height()-45;
                  var maxX = $window.innerWidth-$(element).width();
                  $(element).on('mousedown', function(event) {
                      event.preventDefault();
                      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;
                    //限制范围
                    x<$(element).width()/2 ? x=$(element).width()/2 : x;
                    x>(maxX+$(element).width()/2) ? x=(maxX+$(element).width()/2) : x;
                    y<0 ? y=0:y;
                    y>maxY ? y=maxY:y;
                    element.css({
                      top: y + 'px',
                      left:  x + 'px'
                    });
                  }
                  function mouseup() {
                    $document.off('mousemove', mousemove);
                    $document.off('mouseup', mouseup);
                  }
              }
          }
        }]);

在线地址：http://jsbin.com/refubudavu/e...

Answer 1

绑定mousedown事件时去掉event.preventDefault();