from directive developer guide, tried twist 1 of example draggable directive , make display it's coordinate too.
but code change make directive not draggable. significant change added scope in directive below. can offer on this? full source can found in link below. thanks!
https://plnkr.co/edit/muegehyowc828iji84tt?p=preview
scope:{ startx: '=', starty: '=', x: '=', y: '=' },
here working updated code of your's
angular.module('dragmodule', []) .controller('mycontroller', ['$scope', function($scope){ $scope.startx=0; $scope.starty=0; $scope.x=0; $scope.y=0; }]) .directive('mydraggable', ['$document', function($document) { return { scope:{ startx: '=', starty: '=', x: '=', y: '=' }, link: function(scope, element, attr) { element.css({ position: 'relative', border: '1px solid red', backgroundcolor: 'lightgrey', cursor: 'pointer' }); element.on('mousedown', function(event) { // prevent default dragging of selected content event.preventdefault(); scope.startx = event.pagex - scope.x; scope.starty = event.pagey - scope.y; $document.on('mousemove', mousemove); $document.on('mouseup', mouseup); scope.$apply(); }); function mousemove(event) { scope.y = event.pagey - scope.starty; scope.x = event.pagex - scope.startx; element.css({ top: scope.y + 'px', left: scope.x + 'px' }); scope.$apply(); } function mouseup() { $document.off('mousemove', mousemove); $document.off('mouseup', mouseup); } } }; }]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="dragmodule"> <div ng-controller="mycontroller"> <span my-draggable start-x="startx" start-y="starty" x="x" y="y" id="drag">drag me({{x}},{{y}})</span> </div> </body>
Comments
Post a Comment