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

I'm searching for a plugin ( AngularJs if possible ) that can drag and drop markers over an image.

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

Thanks

谢谢

1 个解决方案

#1

I found an example : http://jsfiddle.net/1knfywzr/

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

(function () {

'use strict';

使用严格的;

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

应用var =角。模块(“应用程序”,[]);

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

控制器('控制器'，'$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);

    }

  }
});

}]);

}));

// Original Drag element app.directive('dragElement', function () {

//原始的拖动元素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>'
};

});

// Dropped Drag element app.directive('droppedElement', function () {

//删除拖动元素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 :

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>

#1