div resize issue with jQuery

Question

I am making a program using html, css, angularJs and jQuery. I am not trained in jQuery nor angular, so I am learning on the way.

The idea is to have different screens moving on the browser and the user will be able to move them where he wants so I am using http://jqueryui.com/draggable/.

But I am having an issue I can not find how to solve. Once you add content on the div or resize it the other divs move down (they think the first div is up to them, so they move down to allow him to grow) it makes no sense since the box is not at the place it began (user provably move it to another place on the screen).

I attach my code, you can see how resize the items you have moved still move the ones on it's initial place:

HTML:

<html>
    <head>
        <title>T1</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">        
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>      

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script src="angularJs/angularScripts.js"></script>
    <script src="JQuery/"></script>

</head>
<body ng-app="myApp" >


    <div class="program" ng-controller="program">
        <button class="buttonAddItem" ng-click="addItem();">
            item +
        </button> 


        <!-- items -->
        <div class="item" ng-repeat="item in items" >
            <div >
                {{item.name}}
            </div>
        </div>


    </div>
    <script>
        //mover las ventanas
        $(function () {
            $(".item").draggable();
        });
        //cambiar el tamano de las ventanas
        $(function () {
            $(".item").resizable();
        });

    </script>
</body>

`

Angular:

var app = angular.module('myApp', []);

app.controller('program', function ($scope) {

$scope.items = [];

$scope.items[0] = {name: "name1"};
$scope.items[1] = {name: "name2"};
$scope.items[2] = {name: "name3"};
$scope.items[3] = {name: "name4"};

$scope.addItem = function ($event) {

    var newItem =  {name: "newItem"};

    $scope.items.push(newItem);
};

$scope.removeMethod = function (id) {

    removeItem($scope.methods, "id", id);
};

var removeItem = function (object, key, value) {
    if (value === undefined)
        return;

    for (var i in object) {
        if (object[i][key] === value) {
            object.splice(i, 1);
        }
    }
};

var getItem = function (object, key, value) {

    if (value === undefined)
        return;

    for (var i in object) {
        if (object[i][key] === value) {
            return object[i];
        }
    }
};

});

CSS:

.item{
    border: solid;
    width: 30%;
}

Can you say me how to solve it please?

cieplik · Accepted Answer · 2016-07-22 10:55:24Z

1

Add position: absolute to your CSS and your boxes will not move down after resize. I would only suggest adding some default positioning (top & left for example), cause without it, they would be shown one on another on page load.

answered Jul 22, 2016 at 10:55

cieplik

665 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cieplik Over a year ago

This is how I was testing this using jsfiddle: jsfiddle.net/jcd4j47b Isn't this what you were expecting? Could you clarify what is not working as you'd expect?

David Marciel Over a year ago

It doesn't work in jsFiddle, angular does not work properly. you have to use it in local machine in a tomcat server.

David Marciel Over a year ago

I managed to do it, it was a conflict between libraries, I have fixed it by deleting the resizable property and using your advice. Thanks for your help.

Collectives™ on Stack Overflow

div resize issue with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related