div jQueryのサイズ変更

私はhtml、css、angularJs、jQueryを使ってプログラムを作っています。私はjQueryでも角度も訓練されていないので、途中で学習しています。div jQueryのサイズ変更

アイデアはブラウザ上で異なる画面を動かすことで、ユーザーは希望する場所に移動してhttp://jqueryui.com/draggable/を使用します。

しかし、私は解決する方法を見つけることができない問題があります。 divにコンテンツを追加したり、サイズを変更したりすると、他のdivが下に移動します（最初のdivがそれらの上にあると思うので、下に移動して彼の成長を許可します）。（画面上の別の場所に移動させることが可能です）。

私は私のコードを添付し、あなたはそれが最初の場所だ上で、あなたはまだ移動したアイテムは、ものを移動、サイズ変更方法を見ることができます。

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>

角度：

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%; 
}

は、あなたがそれをしてください解決する方法を私に言うことはできますか？

出典

2016-07-22 David Marciel

position: absoluteをCSSに追加すると、サイズ変更後にボックスが下に移動しません。私はいくつかのデフォルトの配置（例えば、&を残して）を追加することを提案しました。それがなければ、ページの読み込み時に別のものが表示されます。

出典

2016-07-22 10:55:24

申し訳ありませんが動作しません –

これはjsfiddleを使用してこれをテストした方法です：https://jsfiddle.net/jcd4j47b/ これはあなたが期待していたものではありませんか？期待どおりに動作していないものを明確にすることはできますか？ –

jsFiddleでは動作しません。角度が正しく動作しません。 Tomcatサーバーのローカルマシンでそれを使用する必要があります。 –

答えて

関連する問題