图像上的插件拖放标记-Javascript

我正在搜索一个插件（AngularJs，如果可能的话），它可以在图像上拖放标记

谢谢

我找到了一个例子：

"严格使用",

var-app=angular.module（'app'，[]）

app.controller（'controller'，['$scope'，'$window'，函数（$scope，$window）{

}]))

//原始拖曳元素 应用指令（'DrageElement'，函数（）{

var link=函数（范围、元素、属性）{
$（元素）。可拖动({
‘公差’：‘配合’，
“助手”：“克隆”，
'光标'：'移动'，
“zIndex”：100
});
};
返回{
限制：“AE”，
替换：正确，
链接：链接，
模板：“拖动我”
};

}))

//拖放元素 应用指令（'droppedElement'，函数（）{

var控制器=函数（$scope）{
$scope.clickCount=0；
$scope.viewSettings=函数（$event）{
$event.preventDefault（）；
$scope.clickCount++；
};
};
变量链接=函数（范围、元素、属性）{
元素=$（元素）；
css（'left'，scope.settings.position.x）；
css（'top'，scope.settings.position.y）；
css（'width'，scope.settings.size.width）；
css（'height'，scope.settings.size.height）；
可拖动的元素({
“容器”：“形成容器”，
“helper”：“original”，
‘公差’：‘配合’，
“停止”：scope.onDragStop
});
元素。可调整大小({
“停止”：scope.onDragStop
});
};
返回{
限制：“AE”，
替换：正确，
范围：{
onDragStop:“=”，
设置：“=”，
索引：'='
},
链接：链接，
控制器：['$scope'，controller]，
模板：“索引：{{Index}}}|计数：{{{clickCount}}}-”
};
});
}());

Html:

<div id="drag-container" ng-controller="controller">

---

$scope.zones = [];

var $dragContainer = $('#drag-container');
var $formContainer = $('#form-container');
var $dragElementSource = $('.drag-element-source');

var _updateProperties = function (index, ui) {

  $scope.zones[index] = {
    'position' : {
      'x' : ui.position.left,
      'y' : ui.position.top
    },
    'size' : {
      'width' : ui.helper.width(),
      'height' : ui.helper.height()
    }
  };

  $scope.$apply();

};

 $scope.onDroppedDragStop = function (event, ui) {

  var index = ui.helper.attr('data-index');

  _updateProperties(index, ui);

};

 $formContainer.droppable({
  'drop' : function (event, ui) {

    // Only do this if this is the source element
    if (ui.helper.hasClass('drag-element-source') === true) {

      var index = $scope.zones.length;

      _updateProperties(index, ui);

    }

  }
});

var link = function (scope, element, attrs) {

  $(element).draggable({
    'tolerance' : 'fit',
    'helper' : 'clone',
    'cursor' : 'move',
    'zIndex' : 100
  });

};

return {
  restrict: 'AE',
  replace: true,
  link: link,
  template: '<div class="drag-element-source drag-element">Drag Me</div>'
};

var controller = function ($scope) {

  $scope.clickCount = 0;

  $scope.viewSettings = function ($event) {

    $event.preventDefault();

    $scope.clickCount++;

  };

};

var link = function (scope, element, attrs) {

  element = $(element);

  element.css('left', scope.settings.position.x);
  element.css('top', scope.settings.position.y);
  element.css('width', scope.settings.size.width);
  element.css('height', scope.settings.size.height);

  element.draggable({
    'containment' : '#form-container',
    'helper' : 'original',
    'tolerance' : 'fit',
    'stop' : scope.onDragStop
  });

  element.resizable({
    'stop' : scope.onDragStop
  });

};

return {
  restrict: 'AE',
  replace: true,
  scope: {
    onDragStop: '=',
    settings: '=',
    index: '='
  },
  link: link,
  controller: ['$scope', controller],
  template: '<div class="dropped-element drag-element">Index: {{index}} | Count: {{clickCount}} - <a href="#" ng-click="viewSettings($event)">click me</a></div>'
};
   });


 }());

<div id="drag-container" ng-controller="controller">

<drag-element></drag-element>

  <dropped-element ng-repeat="zone in zones" on-drag-stop="onDroppedDragStop" settings="zone" index="$index"></dropped-element>