I am testing interact.js v1.2.9 which is useful for drag and drop. I want to create a directive of AngularJS v1.6.4 to communicate with my controller and modify the scope, when I take my code to practice the objects that I am creating have problems with the coordinates and with the behavior in general.
// directives.directive('draggable', ['$rootScope', '$document',
'interactJS', 'uuid', function($rootScope, $scope, $document, interactJS,
uuid) {
// return {
// scope: {
// onDrop: '&'
// },
// controller: ["$scope", function($scope, element, attr, controller) {
// console.log($scope, element, attr, controller);
// // $scope.tituloLista = $scope.opciones[0].tipos;
// // $scope.seleccion = {};
// // angular.forEach($scope.ngModel, function(id) {
// // $scope.seleccion[id] = true;
// // });
// }],
// link: function(scope, element, attr, controller) {
// // var test = interactJS.test('scope, window.interact');
// console.log(interactJS);
// console.log(uuid.new());
// }
// // link: (function(scope, element, attr, controller) {
// // var transformProp;
// // console.log(scope, element, attr, controller);
// // interact.maxInteractions(Infinity);
// // el = interact('.js-drag');
// // el.draggable({
// // max: Infinity,
// // maxPerElement: 2,
// // })
// // .on('dragstart', function(event) {
// // event.interaction.x = parseInt(event.target.getAttribute('data-x'), 10) || 0;
// // event.interaction.y = parseInt(event.target.getAttribute('data-y'), 10) || 0;
// // })
// // .on('dragmove', function (event) {
// // // console.log(event);
// // event.interaction.x += event.dx;
// // event.interaction.y += event.dy;
// // if (transformProp) {
// // event.target.style[transformProp] =
// // 'translate(' + event.interaction.x + 'px, ' + event.interaction.y + 'px)';
// // } else {
// // event.target.style.left = event.interaction.x + 'px';
// // event.target.style.top = event.interaction.y + 'px';
// // }
// // })
// // .on('dragend', function (event) {
// // event.target.setAttribute('data-x', event.interaction.x);
// // event.target.setAttribute('data-y', event.interaction.y);
// // });
// // // setupDropzone('.js-drop', '#drag1, #drag2, #drag3, #drag4');
// // setupDropzone('.js-drop', '#drag1, #drag2, #drag3, #drag4');
// // /**
// // * Setup a given element as a dropzone.
// // *
// // * @param {HTMLElement|String} el
// // * @param {String} accept
// // */
// // function setupDropzone(el, accept) {
// // interact(el)
// // .dropzone({
// // //accept: accept,
// // ondropactivate: function (event) {
// // addClass(event.relatedTarget, '-drop-possible');
// // },
// // ondropdeactivate: function (event) {
// // removeClass(event.relatedTarget, '-drop-possible');
// // }
// // })
// // .on('dropactivate', function (event) {
// // var active = event.target.getAttribute('active')|0;
// // // change style if it was previously not active
// // if (active === 0) {
// // addClass(event.target, '-drop-possible');
// // event.target.textContent = 'Drop me here!';
// // }
// // event.target.setAttribute('active', active + 1);
// // })
// // .on('dropdeactivate', function (event) {
// // var active = event.target.getAttribute('active')|0;
// // // change style if it was previously active
// // // but will no longer be active
// // if (active === 1) {
// // removeClass(event.target, '-drop-possible');
// // event.target.textContent = 'Dropzone';
// // }
// // event.target.setAttribute('active', active - 1);
// // })
// // .on('dragenter', function (event) {
// // addClass(event.target, '-drop-over');
// // event.relatedTarget.textContent = 'I\'m in';
// // })
// // .on('dragleave', function (event) {
// // removeClass(event.target, '-drop-over');
// // event.relatedTarget.textContent = 'Drag me…';
// // //scope.onDrop({dragEl: event.relatedTarget.id, dropped: false});
// // })
// // .on('drop', function (event) {
// // removeClass(event.target, '-drop-over');
// // console.log(event.relatedTarget.id);
// // event.relatedTarget.textContent = 'Dropped';
// // console.log(scope, element, attr, controller);
// // //scope.onDrop({dragEl: event.relatedTarget.id, dropped: true});
// // });
// // }
// // function addClass (element, className) {
// // if (element.classList) {
// // return element.classList.add(className);
// // }
// // else {
// // element.className += ' ' + className;
// // }
// // }
// // function removeClass (element, className) {
// // if (element.classList) {
// // return element.classList.remove(className);
// // }
// // else {
// // element.className = element.className.replace(new RegExp(className + ' *', 'g'), '');
// // }
// // }
// // interact(document).on('ready', function () {
// // transformProp = 'transform' in document.body.style
// // ? 'transform': 'webkitTransform' in document.body.style
// // ? 'webkitTransform': 'mozTransform' in document.body.style
// // ? 'mozTransform': 'oTransform' in document.body.style
// // ? 'oTransform': 'msTransform' in document.body.style
// // ? 'msTransform': null;
// // });
// // }(window.interact))
// };
// }]);
If I do the directive that way it works fine but I can not communicate with the scope.
link: (function(scope, element, attr, controller) {
that line of code alters the operation of angular
link: function(scope, element, attr, controller) {
This is how the scope works but it does not render the dragandrop object well
The original code that I want to transform into a directive is:
HTML: link
JS: link
My doubt arises in how I have to transform the JS to create one or several angular directives