2

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

这是代码笔 - http://codepen.io/anon/pen/qmuvH/

在代码笔中 - 你会看到一个带有文本的框 - “大家好”（div#layer）。我确实将它的风格与角度绑定 -

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

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

但我还使用 angular 指令中的 jqueryUI 使“大家好”的 div 可拖动。所以你可以拖动那个元素。

我现在想要的是 - 如果我拖动“大家好” div 元素 - 它也会更新layer.data.left和layer.data.top。所以这也会改变输入字段中的值。我怎样才能做到这一点？

4

3 回答 3

2

你可以尝试这样的事情：

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);
}

更新了 Codepen

于 2014-04-08T12:09:16.980 回答
1

您可以在图层 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

这是一个更新的代码笔

于 2014-04-08T12:17:18.967 回答
0

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

我刚刚在拖动事件函数中更新了我的代码 -

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

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

于 2014-05-14T18:13:59.503 回答