Question

我想在angularjs中使用鼠标拖动来改变html元素的样式。使用this模块在angular中注入鼠标拖动。现在如何用鼠标拖动改变li元素样式？实际上我的示例代码是一个时间线，因此当用户鼠标在此时间线上拖动年份时会发生变化。

＆＃13;

/**!
 * AngularJS mouse drag directive
 * @author  Ozan Tunca  <ozan@ozantunca.org>
 * @version 0.1.0
 */
(function() {

    var ngMousedrag = angular.module('ngMouseDrag', []);
    ngMousedrag.directive('ngMousedrag', ['$document', function ngMousedrag($document) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var endTypes = 'touchend mouseup'
                    , moveTypes = 'touchmove mousemove'
                    , startTypes = 'touchstart mousedown'
                    , startX, startY;

                element.bind(startTypes, function startDrag(e) {
                    e.preventDefault();
                    startX = e.pageX;
                    startY = e.pageY;

                    $document.bind(moveTypes, function (e) {
                        e.dragX = e.pageX - startX;
                        e.dragY = e.pageY - startY;
                        e.startX = startX;
                        e.startY = startY;
                        scope.$event = e;
                        scope.$eval(attrs.ngMousedrag);
                    });

                    $document.bind(endTypes, function () {
                        $document.unbind(moveTypes);
                    });
                });
            }
        };
    }]);

})();

＆＃13;

   #draggable {
            width: 200px;
            height: 200px;
            position: absolute;
            background: red;
            cursor: move;
            top: 0;
            left: 0;
        }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Angular Mousedrag Example</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

</head>

<body>
  <div ng-app="myApp">
    <div id="wrapper" ng-controller="Slider">
      <div ng-init="years=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79]">
        <ol id="draggable" ng-mousedrag="onMouseDrag($event);">
          <li ng-repeat="y in years">{{y}}
          </li>
        </ol>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    (function() {
      angular.module('myApp', ['ngMouseDrag'])
        .controller('Slider', function($scope, $compile) {
          $scope.dragY = 0;
          $scope.onMouseDrag = function($event) {
            var draggableObject = document.getElementById('draggable');
            draggableObject.style.top = $event.pageY + 'px';
            $scope.dragY = $event.pageY;
            $scope.$digest();
          }
        });

      angular.bootstrap(document, ['myApp']);
    })();
  </script>
</body>

</html>

＆＃13;

用鼠标拖动角度改变html元素样式

0 个答案: