插件在图像上拖放标记 - Javascript答案

【问题标题】：Plugin Drag and drop markers over an image - Javascript插件在图像上拖放标记 - Javascript
【发布时间】：2017-07-11 15:15:58
【问题描述】：

我正在寻找一个可以在图像上拖放标记的插件（如果可能的话是 AngularJs）。

谢谢

【问题讨论】：

github.com/bevacqua/dragula

标签： javascript jquery angularjs image drag-and-drop

【解决方案1】：

我找到了一个例子： http://jsfiddle.net/1knfywzr/

(function () {

'使用严格';

var app = angular.module('app', []);

app.controller('controller', ['$scope', '$window', function ($scope, $window) {

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

    }

  }
});

}]);

// 原始拖动元素 app.directive('dragElement', function () {

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

});

// 拖放的拖动元素 app.directive('droppedElement', function () {

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


 }());

HTML：

<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>

【讨论】：