Выделить элемент с помощью углового перетаскивания "onOver"

#angularjs #drag-and-drop #droppable

#angularjs #перетаскивание #удаляемый

Вопрос:

В настоящее время я использую плагин codef0rmer / angular-dragdrop для angular js, и у него есть обработчик событий «onOver», как в пользовательском интерфейсе jQuery

в настоящее время у меня есть удаляемый элемент

 <div jqyoui-droppable="{multiple:true, onOver:'highlightRow'}">

и когда я перетаскиваю перетаскиваемый элемент, он без проблем вызывает функцию ‘highlightRow’, вот эта функция

 $scope.highlightRow = function(){
console.log('in highlight row!');               
        };

Однако проблема, с которой я сталкиваюсь, заключается в том, что я хотел бы добавить класс в этот div через обработчик события onOver, но я не вижу способа angularjs просто передать элемент функции ‘highlightRow’, чтобы я мог сделать что-то вроде этого:

 element.addClass('highlight');

Есть ли способ, которым я могу выделить эту строку с помощью обработчика событий «onOver», я действительно не хочу писать свою собственную директиву и привязывать к ней нужные мне функции, я бы подумал, что «onOver» может это сделать, иначе какая от него польза?

Ответ №1:

Я бы просто сохранил состояние over в области видимости, а затем использовал ng-class :

 $scope.dropOver = false;

$scope.highlightRow = function(){
  $scope.dropOver = true;             
};

Назначьте нужный класс на основе значения области видимости:

 <div ng-class="{highlight: dropOver}" jqyoui-droppable="{multiple:true, onOver:'highlightRow'}">

1. Спасибо, Ретро, это решение работает и дает мне необходимую функциональность.

2. однако я должен отметить, что это работает только для выделения строки, однако есть также случаи, когда мне нужно отредактировать атрибуты стиля элемента (ширина, положение слева), и я не могу сделать это, просто добавив класс, поскольку значения не могут быть вычислены на лету, поэтому мне все еще нужен доступ кфактический элемент, есть идеи о том, как это сделать?

3. Попробуйте, если highlightRow обратный вызов получит событие, содержащее элемент ( .target ) в качестве аргумента. Вы можете установить необходимые атрибуты вычисляемого стиля для своей области и применить их ng-style . Но, возможно, было бы лучше написать свою собственную директиву, если вам нужно много манипулировать DOM 😉

4. Еще раз спасибо Reto, то, что я решил сделать, это использовать метод onDrop для вызова моей собственной функции $scope.dropCall= function(e,ui) , и из этого я могу получить доступ к атрибутам удаляемого элемента, используя var droppedOn = angular.element(e.target).attr(‘id’); или перетаскиваемый элемент с помощью var drag = angular.element(ui.target).attr(‘id’); Я знаю, что это не очень «угловой» доступ к элементам DOM, подобным этому, но в данном случае я думаю, этого будет достаточно

5. ** быстрая коррекция перетаскиваемая переменная на самом деле должна выглядеть так: var drag = ui.draggable;