Well, i've been searching around about how to resize a window with the cursor, but i didn't had much succeed.
My idea is to resize a window inside of the html page and be able to move around. Guess it need some css experience to do so.
Could someone help me? Thanks!
For the description I guess you're trying to resize a div or something so you can use transitions:
https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/
Try using this for drag and drop:
http://ngmodules.org/modules/ngDraggable (Example)
To use draggable use the directive as follows:
1) Include the library in your index:
<script src="ngDraggable.js"></script>
2) In your module definition inject ngDraggable:
angular.module('myApp', ['... , ngDraggable']);
3) Append your html tags with ng-drag
<div ng-drag="true" ng-drag-data="{obj}" ng-center-anchor="true"
ng-drag-success="onDragComplete($data,$event)">
Draggable div
</div>
where ng-drag-success is your function when a drag is finished.
So, you can make some box based on div's in your html, and append some "resize points" at corners which are draggable items and then on your success callback (onDragComplete) modify the style of your "window" to change its size.
To accomplish the resize, you can make use of ng-style and change the width and height of your "window".
Html:
<!-- Your resizable window -->
<div ng-style="changingStyle">
Controller:
$scope.changingStyle = {}
$scope.onDragComplete = function(data, event){
...
// Here you pass some params to change the size as you want
changeWinSize(someOperationToResize);
...
}
var changeWinSize = function (params){
$scope.changingStyle = {height: params.height, width: params.width }
}
Please provide further information about your problem.
