javascript - Hover a element while dragging another element Dragula -

  here  want drop element when folder collapsed.   dragula bag enabled , highlighted when dragged element   hovered on other li elements.  

html code

 <div drag-folders="folder">    <ul dragula="'folder-bag'">     <li id="{{folder.id}}" ng-repeat="folder in $ctrl.folders" ng-     mousemove="$ctrl.makeextradragulafolderbigger(folder.id)">     <div ng-show="$ctrl.shouldshowchildren[folder.id]" ng-           click="$ctrl.shouldshowchildren[folder.id] !=           $ctrl.shouldshowchildren[folder.id]"> right-arrow     </div>     <div ng-hide="$ctrl.shouldshowchildren[folder.id]" ng-        click="$ctrl.shouldshowchildren[folder.id] !=         $ctrl.shouldshowchildren[folder.id]"> right-arrow     </div>     <div>{{folder.name}} </div>     <ul ng-show="$ctrl.shouldshowchildren[folder.id]"        dragula="'folder-bag'">      <li id="{{child.id}}" ng-repeat="child in folder.children">     </li>     </ul>     <div ng-if="!$ctrl.shouldshowchildren[folder.id]" id="    {{folder.id}}extradragula"> </div>   <li> </ul> </div> 

controller code

 self.makeextradragulaelementbigger = function (event, extradragulaid) {         var extradragulacontainer = document.getelementbyid(extradragulaid + 'extradragula');         var draggedelementonthedom = document.getelementsbyclassname('gu-mirror');         if (angular.element(draggedelementonthedom[0]).hasclass('dragged-element')) {             angular.element(extradragulacontainer).addclass('dragula-drop-area');         }     }; 

directive

(function () { 'use strict';  angular     .module('app.components.work')     .directive('dragfolders', dragfoldersdirective);  /** @nginject */ function dragfoldersdirective($window, uiservice, apiservice, dateinheritservice, $rootscope, $timeout) {     return {         restrict: 'a',          link: function (scope) {              var folders = scope.$ctrl.folders;               scope.$on('folder-bag.drag', function (e, el, container) {                angular.element(document.getelementbyid(uiservice.getitemidfromdomelementid(el[0].id, 'dragable') + 'extradragula'))                     .removeclass('expandextradragula');                 if (container[0].id == 'rootcontainer') {                     excontainerid = null;                 }                  else {                     excontainerid = uiservice.getitemidfromdomelementid(container[0].id, 'childleft');                 }                  excontainerscope = angular.element(container).scope();              });              scope.$on('folder-bag.drop', function (e, el, container, target, sibling) {                 //remove dragula-drop-area extradragula element after drop on closed iteration                 if(angular.element(container).hasclass('dragula-drop-area')) {                     angular.element(container).removeclass('dragula-drop-area')                 }                 //if folder dropped in root                 if (container[0].id == 'rootcontainer') {                     isfolderdroppedinroot = true;                     console.log('dropped in root');                     angular.element(el).addclass('mc-container');                     reorderinroot(el, container);                 } else {                      isfolderdroppedinroot = false;                     //if folder dropped not in root                     reorderfolders(e, el, container);                 }              });              scope.$on('folder-bag.cancel', function (e, el, container) {                 //close drag containers folders doesn't have children                 angular.element(document.getelementsbyclassname('extradragula')).removeclass('expandextradragula');             });              scope.$on('folder-bag.over', function (e, el, container) {                 //angular.element(container).find('.extradragula').addclass('expandextradragula');                 //container.addclass('ex-over');             });              scope.$on('folder-bag.out', function (e, el, container) {                 //container.removeclass('ex-over');                 if(angular.element(container).hasclass('dragula-drop-area')) {                     angular.element(container).removeclass('dragula-drop-area')                 }             });}};}})(); 

 mouseover of other element while dragging element not   working. please provide suggestions make li item droppable