Question

我有不同位置的div，可以移动并有文本字段。我使用JSON文件来存储每个不同div的坐标以及任何文本。我也使用angularjs进行页面交互。我得到了可拖动的部分，但我在保存新坐标和文本方面遇到了问题。用户可以单击保存按钮，应该更新所有内容。我正在使用http.get将JSON文件放到页面上。我坚持如何使用http.post来更新div。

index.html

<!DOCTYPE html>
<html lang="en" ng-app="container">
<head>
  <meta charset="utf-8">
  <title>efoli</title>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="containers.js"></script>

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="Style/design.css">

</head>
  <body ng-controller="ContainerController as contain">
    <div id="grid"></div>
    <div class="container">
      <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container-fluid">
            <a class="navbar-brand">NAME</a>
            <form ng-submit="submit()">
                <input type="submit" id="submit" value="save"/>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li class=dropdown>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">Account<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">something</a></li>
                  <li><a href="#">something</a></li>
                  <li><a href="#">something</a></li>
                  <li><a href="#">something</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
    <div class="drag resize" ng-repeat="product in contain.block" style="position:absolute; top:{{product.x}}; left:{{product.y}}" movement>
      <h1>{{product.title}}</h1>
      <textarea ng-model="newText" style="display:table-cell; width:inherit; height:inherit"></textarea>
    </div>
  </body>
</html>

container.js

(function() {
  var app = angular.module('container', []);
  app.controller('ContainerController', ['$http', function($http) {
    var contain = this;
    contain.block= [];
    $http.get('data.json').success(function(data){
      contain.block = data;
    });
  }]);

  app.directive('movement', function(){
    return {
      restrict:'A',
      link: function() {
          $('.drag').draggable({grid:[25,25]});
          $('.resize').resizable({grid:25});
        }
    }
  });

}) ();

data.json

[
  { "title" : "Test1",
    "text" : "",
    "x" : "151px",
    "y" : "350px" },
  { "title" : "Test2",
    "text" : "",
    "x" : "151px",
    "y" : "700px" },
  { "title" : "Test3",
    "text" : "",
    "x" : "351px",
    "y": "525px"},
  { "title" : "Test4",
    "text" : "",
    "x" : "251px",
    "y" : "525px"},
  { "title" : "Test5",
    "text" : "",
    "x" : "451px",
    "y" : "525px"}
]

更新jqueryUI - 使用JSON数据进行draggable

0 个答案: