如何将拖放坐标保存回角度模型？答案

【问题标题】：How to save drag/drop coordinates back to angular model?如何将拖放坐标保存回角度模型？
【发布时间】：2017-03-29 20:15:30
【问题描述】：

我的代码允许拖放覆盖页面图像的表单域。我正在使用 Kendo-ui 进行拖放，但这对答案并不重要，我不认为，并且演示过于简化并且不包含图像。我需要能够更改角度模型的坐标以反映放置的位置，以便我可以保存它。我的问题的核心是如何更新模型。既然我可能有数百个字段，那么最有效的方法是什么？是否可以绑定到左/下 CSS 坐标？我应该使用 jQuery 手动更新 CSS，然后更新模型吗？

Here's the plunker with my code

INDEX.HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.bootstrap.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>

    <script id="page-template" type="text/ng-template">
      <div class="page" kendo-droptarget style="{{ 'width:' + (p.width + 2) + 'px; height:' + (p.height + 2) + 'px;' }}" ng-repeat="p in model.transaction.selectedDocument.pages">
            <div class="field" data-fieldname="f.fieldName" kendo-draggable k-hint="model.draggableHint" k-dragstart="model.onDragStart" k-dragend="model.onDragEnd" ng-repeat="f in p.fields" style="{{ 'left:' + f.left + 'px;bottom:' + f.bottom + 'px;width:' + f.width + 'px;height:' + f.height + 'px;' }}">
                <div></div>
            </div>
        </div>
        <pre>{{ model | json }}</pre>
    </script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <page-image-component></page-image-component>
  </body>

</html>

SCRIPT.JS

// Code goes here
console.clear();

function pageImageController(TransactionFactory) {
    var model = this;
    model.transaction = TransactionFactory;

    model.draggableHint = function (e) {
        return e.clone();
    }

    model.onDragStart = function (e) {
        console.log(e);
        e.currentTarget.hide();
    }

    model.onDragEnd = function (e) {
        console.log(e);
        //e.currentTarget.css("left", "0px").css("top", "0px");
        var field = e.currentTarget[0];

        console.log(e.currentTarget)

        e.currentTarget.show();
    }
}

var app = angular.module("app", ["kendo.directives"]);

app.factory('TransactionFactory', function () {
    var transaction = {
        selectedDocument: {
          fileName: "my.pdf",
          pages: [{
            pageNumber: 1,
            width: 400,
            height: 500,
            fields: [
              {
                fieldName: "my field 1",
                width: 75,
                height: 13,
                left: 50,
                bottom: 300,
                instance: 1
              },
              {
                fieldName: "another field 1",
                width: 65,
                height: 13,
                left: 200,
                bottom: 440,
                instance: 1
              },
            ]
          }]
        }
    };

    return transaction;
});

app.component("pageImageComponent", {
    template: $("#page-template").html(),
    controllerAs: "model",
    controller: ["TransactionFactory", pageImageController]
});

STYLE.CSS

/* Styles go here */

.page
{
  border: 1px solid black;
  position: relative;
}

.field
{
  background-color: #ddd;
  position: absolute;
}

【问题讨论】：

标签： javascript angularjs kendo-ui

【解决方案1】：

我想我想通了，我认为它对于摇滚乐来说已经足够高效了。

Here's the Plunker

function pageImageController(TransactionFactory) {
    var model = this;
    model.transaction = TransactionFactory;

    var tempLeft = 0;
    var tempTop = 0;

    model.draggableHint = function (e) {
        return e.clone();
    }

    model.onDragStart = function (e) {
        //console.log(e);
        e.currentTarget.hide();
    }

    model.onDrop = function (e) {
      tempLeft = e.draggable.hint.offset().left -9;
      tempTop = e.draggable.hint.offset().top +2;

      console.log(e.draggable);
    }

    model.onDragEnd = function (e) {
      //console.log(e);
      var field = e.currentTarget[0];

      //console.log(field)

      var fieldIndex = field.attributes['data-fieldindex'].value;
      var pageIndex = field.attributes['data-pageindex'].value;

      //console.log(fieldIndex);
      //console.log(pageIndex);
      var tempBottom = model.transaction.selectedDocument.pages[pageIndex].height - tempTop;
      model.transaction.selectedDocument.pages[pageIndex].fields[fieldIndex].left = tempLeft;
      model.transaction.selectedDocument.pages[pageIndex].fields[fieldIndex].bottom = tempBottom;

      e.currentTarget.css("left", tempLeft + "px").css("bottom", tempBottom + "px");

      e.currentTarget.show();
    }
}

【讨论】：