Question

我无法使底页元素可拖动。我想以这样一种方式，当用户垂直向上或向下拖动时，它的高度应该自动调整。当我点击底页外面时，它应该隐藏起来。请给我你的建议。这是我正在使用的代码。 `

      <link href="style.css" rel="stylesheet" />
      <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>

      <script src="resizer.js"></script>
      <script language="javascript">
        angular
           .module('firstApplication', ['ngMaterial','mc.resizer'])
           .controller('bottomSheetController', bottomSheetController);

        function bottomSheetController ($scope, $mdBottomSheet) {
           $scope.openBottomSheet = function() {
              $mdBottomSheet.show({
                 template: '<md-bottom-sheet resizer="horizontal" resizer-height="6" resizer-top="#top-content" resizer-bottom="#bottom-content">Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>'
              });
           };
        }  
      </script>      
   </head>
   <body ng-app="firstApplication">
      <div ng-controller="bottomSheetController as ctrl" layout="column">
         <md-content class="md-padding">
            <form ng-submit="$event.preventDefault()">
               <md-button class="md-raised md-primary" ng-click="openBottomSheet()">
                  Open Bottom Sheet!
               </md-button>
            </form>
         </md-content>
      </div>
   </body>## Heading ##
</html>



for resizer, this is the code, save it to resizer.js


angular.module('mc.resizer', []).directive('resizer', function($document) {

    return function($scope, $element, $attrs) {
        $element.on('mousedown', function(event) {
            event.preventDefault();
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
        });

        function mousemove(event) {
            if ($attrs.resizer == 'vertical') {
                // Handle vertical resizer
                var x = event.pageX;
                if ($attrs.resizerMax && x > $attrs.resizerMax) {
                    x = parseInt($attrs.resizerMax);
                }
                $element.css({
                    left: x + 'px'
                });
                $($attrs.resizerLeft).css({
                    width: x + 'px'
                });
                $($attrs.resizerRight).css({
                    left: (x + parseInt($attrs.resizerWidth)) + 'px'
                });
            } else {
                // Handle horizontal resizer
                var y = window.innerHeight - event.pageY;
                $element.css({
                    bottom: y + 'px'
                });
                $($attrs.resizerTop).css({
                    bottom: (y -100+ parseInt($attrs.resizerHeight)) + 'px'
                });
                $($attrs.resizerBottom).css({
                    height: y + 'px'
                });
            }
        }

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

有角度的材料底板可拖动

0 个答案: