0
私のコードでは、フォームフィールドをドラッグしてページイメージの上に重ねることができます。私は剣道を使ってドラッグ＆ドロップをしていますが、それは答えにはあまり重要ではないと私は考えていません。デモは単純すぎてイメージを含んでいません。私はそれを保存できるように、ドロップされた場所を反映するために角型モデルの座標を変更できるようにする必要があります。私の質問の肉は、モデルを更新する方法です。おそらく何百ものフィールドを持つことができるので、これを行う最も効率的な方法は何ですか？左/下の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;
}