我正在搜索可以在图像上拖放标记的插件(如果可能,可以使用AngularJs)。
谢谢
答案 0 :(得分:1)
我找到了一个例子: http://jsfiddle.net/1knfywzr/
(function () {
'使用严格的';
var app = angular.module(' app',[]);
app.controller('控制器',[' $范围',' $ window',功能($ 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>'
};
});
// Dropped Drag元素 app.directive(&#39; droppedElement&#39;,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>