1
我正在使用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%;
}
你能說我如何解決它嗎?
對不起,但它不起作用 –
這就是我使用jsfiddle測試它的方法:https://jsfiddle.net/jcd4j47b/ 這不是你期望的嗎?你能否澄清一下你所期望的不工作? –
它在jsFiddle中不起作用,角度不能正常工作。 你必須在tomcat服務器的本地機器上使用它。 –