Question

我正在使用Angular和jQueryUI构建拖动界面。我想使用Angular的原因是，我想要angularJS 2路数据绑定真的很棒！

以下是codepen - http://codepen.io/anon/pen/qmuvH/

在codepen中 - 你会看到有文字框 - ＆＃34;大家好＆＃34; （DIV＃层）。我确实用angular -

绑定了它的样式

top:{{layer.data.top}}px;left: {{layer.data.left}}px

并在同一 layer.data.top 和 layer.data.left 中添加了两个输入字段 ng-model ; 因此，当您更改输入字段中的值时 - 它将移动div元素。到目前为止，这很有效。

但是我也做了那个＆＃34;大家好＆＃34;在angular指令中使用jqueryUI进行div draggable。所以你可以拖动那个元素。

我现在想要的是 - 如果我拖着＃34;你好每个人＆＃34; div元素 - 它还将更新 layer.data.left 和 layer.data.top 。所以这也会改变输入字段中的值。我怎么能这样做？

Answer 1

您可以尝试这样的事情：

Top : <input id='top' type="text" ng-model="layer.data.top">
Left : <input id='left' type="text" ng-model="layer.data.left">

为两个输入分配特定ID，然后在drag函数中执行此操作：

drag: function( event, ui ) {
   console.log(event);
   $('#top').val($(this).position().top);
   $('#left').val($(this).position().left);
}

Updated Codepen

Answer 2

你可以在图层div上为mouseup添加一个事件监听器，它会调用一个相应地改变图层数据的函数，所以它将是：

控制器内部的

1-定义一个这样的函数：

$scope.getInfo = function (layer) {
  var el = document.getElementById('layer');
  layer.data.left = parseInt(el.style["left"]);
  layer.data.top = parseInt(el.style["top"]);
}

2-将ng-mouseup="getInfo(layer)"添加到您的图层div

这里有一个更新的codepen

Answer 3

在2个答案的帮助下，我最终使用了以下更新 -

我刚刚在拖动事件功能中更新了我的代码 -

drag: function( event, ui ) 
{
    scope.layer.data.left = ui.position.left;
    scope.layer.data.top = ui.position.top;
    scope.$apply();
}

这是更新的代码集 - http://codepen.io/anon/pen/wgzme

Angular - 使用DIV元素样式的2路数据绑定

3 个答案:

Updated Codepen