dragEnter and dragLeave event + ngDragClone can select in which DOM e…

…lment the copy is done - dragEnter and dragLeave event on the drop zone - ngDragClone can select in which DOM elment the copy is done. Example : ng-drag-clone-copy-html=".clone_container"
Shocoben · Feb 7, 2016 · b494fad · b494fad
1 parent d4c3805
commit b494fad
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 16 deletions.
diff --git a/example-multiple-scrolls.html b/example-multiple-scrolls.html
@@ -134,7 +134,7 @@ <h1>ngDraggable Multiple Scrolls Example</h1>
 
       <hr/>
       <div class="draggable-zones-container">
-            <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
+            <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)" ng-drag-enter="onDragEnter1($data, $event)" ng-drag-leave="onDragLeave1($data, $event)">
                 <span class="title">Drop area #1</span>
                 <div ng-repeat="obj in droppedObjects1" class="redbox {{obj.group}}" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragSuccess1($data,$event)"  ng-drag-clone-group="{{obj.group}}"  ng-drag-scroll="true" scroll-element=".draggable-zones-container">
                     {{obj.name}}
@@ -170,8 +170,14 @@ <h1>ngDraggable Multiple Scrolls Example</h1>
       </div>
       <hr>
 
-      <div ng-drag-clone="" >
-          {{clonedData.name}}
+      <div ng-drag-clone="" ng-drag-clone-copy-html=".clone_container">
+          <p class="clone_container">
+            {{clonedData.name}}
+          </p>
+      </div>
+
+      <div class="clone_container bis">
+
       </div>
 
       <div ng-drag-clone="" ng-drag-clone-copy-class="true" ng-drag-clone-copy-html="false" ng-drag-clone-group="special">
@@ -207,6 +213,15 @@ <h1>ngDraggable Multiple Scrolls Example</h1>
                 $scope.droppedObjects1.splice(index, 1);
             }
         }
+
+        $scope.onDragEnter1=function($data, $event){
+            console.log("onDragEnter1", $data, $event);
+        }
+
+        $scope.onDragLeave1=function(drop,drag){
+            console.log("onDragLeave1", drop, drag);
+        }
+
         $scope.onDragSuccess2=function(data,evt){
             var index = $scope.droppedObjects2.indexOf(data);
             if (index > -1) {

diff --git a/ngDraggable.js b/ngDraggable.js
@@ -350,6 +350,8 @@ angular.module("ngDraggable", [])
                 var onDragStartCallback = $parse(attrs.ngDragStart);
                 var onDragStopCallback = $parse(attrs.ngDragStop);
                 var onDragMoveCallback = $parse(attrs.ngDragMove);
+                var onDragEnterCallback = $parse(attrs.ngDragEnter);
+                var onDragLeaveCallback = $parse(attrs.ngDragLeave);
 
                 var initialize = function () {
                     toggleListeners(true);
@@ -383,17 +385,46 @@ angular.module("ngDraggable", [])
                         });
                     }
                 };
+
                 var onDragMove = function(evt, obj) {
                     if(! _dropEnabled)return;
-                    isTouching(obj.x,obj.y,obj.element);
 
+                    var dragElement = obj.element;
+                    var cbData = {
+                      "drag_data" : obj,
+                      "drop" : element
+                    }
+                    var enterCb = function()
+                    {
+                      $rootScope.$broadcast('droppable:dragenter', {element : element, dragElement : dragElement});
+                      if(attrs.ngDragEnter)
+                      {
+                        scope.$apply(function () {
+                            onDragEnterCallback(scope, {$data : cbData,  $event : obj.event});
+                        });
+                      }
+                    }
+
+                    var leaveCb = function()
+                    {
+                      $rootScope.$broadcast('droppable:dragleave', {element : element, dragElement : dragElement});
+                      if(attrs.ngDragLeave)
+                      {
+                        scope.$apply(function () {
+                            onDragLeaveCallback(scope, {$data : cbData, $event : obj.event});
+                        });
+                      }
+                    }
+
+                    isTouching(obj.x,obj.y,obj.element, enterCb, leaveCb);
                     if (attrs.ngDragMove) {
                         $timeout(function(){
                             onDragMoveCallback(scope, {$data: obj.data, $event: obj});
                         });
                     }
                 };
 
+
                 var onDragEnd = function (evt, obj) {
 
                     // don't listen to drop events if this is the element being dragged
@@ -402,6 +433,7 @@ angular.module("ngDraggable", [])
                         updateDragStyles(false, obj.element);
                         return;
                     }
+
                     if (isTouching(obj.x, obj.y, obj.element)) {
                         // call the ngDraggable ngDragSuccess element callback
                         if(obj.callback){
@@ -424,32 +456,30 @@ angular.module("ngDraggable", [])
                     updateDragStyles(false, obj.element);
                 };
 
-                var isTouching = function(mouseX, mouseY, dragElement) {
+                var isTouching = function(mouseX, mouseY, dragElement, enterCb, leaveCb) {
                     var touching= hitTest(mouseX, mouseY);
                     scope.isTouching = touching;
                     if(touching){
                         _lastDropTouch = element;
                     }
-                    updateDragStyles(touching, dragElement);
+                    updateDragStyles(touching, dragElement, enterCb, leaveCb);
                     return touching;
                 };
 
-                var updateDragStyles = function(touching, dragElement) {
+                var updateDragStyles = function(touching, dragElement, enterCb, leaveCb) {
                     if(touching){
                         var justEntered = !element.hasClass('drag-enter');
                         element.addClass('drag-enter');
                         dragElement.addClass('drag-over');
-                        if(justEntered)
-                        {
-                          $rootScope.$broadcast('droppable:dragenter', {element:element, dragElement:dragElement});
-                        }
+                        if(justEntered && enterCb)
+                          enterCb();
                     }else if(_lastDropTouch == element){
                         _lastDropTouch=null;
                         var justLeaved = element.hasClass('drag-enter');
                         element.removeClass('drag-enter');
                         dragElement.removeClass('drag-over');
-                        if(justLeaved)
-                          $rootScope.$broadcast('droppable:dragleave', {element:element, dragElement:dragElement});
+                        if(justLeaved && leaveCb)
+                          leaveCb();
                     }
                 };
 
@@ -475,13 +505,20 @@ angular.module("ngDraggable", [])
                 var _copyClass = (attrs.ngDragCloneCopyClass === "false" || attrs.ngDragCloneCopyClass === false)? false : true;
                 var _copyHtml = (attrs.ngDragCloneCopyHtml === "false" || attrs.ngDragDCloneCopyHtml === false)? false : true;
                 var _hideOnClone = (attrs.ngDragCloneHide === "false" || attrs.ngDragDCloneHide === false)? false : true;
+                var _copyHtmlElement = element;
+                if (_copyHtml && attrs.ngDragCloneCopyHtml !== "true" || attrs.ngDragCloneCopyHtml !== true)
+                {
+                  var foundElement = angular.element(element[0].querySelector(".clone_container"));
+                  if (foundElement && foundElement.length > 0)
+                    _copyHtmlElement = foundElement;
+                }
 
                 var _didCopyHtml = false;
                 var _didCopyClass = false;
                 var _didHide = false;
 
                 var initialize = function () {
-                    _baseHTML = element.html();
+                    _baseHTML = _copyHtmlElement.html();
                     _baseClass = element.attr("class");
                     img = element.find('img');
                     element.attr('draggable', 'false');
@@ -522,7 +559,7 @@ angular.module("ngDraggable", [])
 
                         if(dragCloneData.copyHtml && _copyHtml)
                         {
-                          element.html(toCloneElm.html());
+                          _copyHtmlElement.html(toCloneElm.html());
                           _didCopyHtml = true;
                         }
 
@@ -578,7 +615,9 @@ angular.module("ngDraggable", [])
 
                 var reset = function(obj) {
                     if(_didCopyHtml)
-                      element.html(_baseHTML);
+                    {
+                      _copyHtmlElement.html(_baseHTML);
+                    }
                     if(_didCopyClass)
                       element.attr("class", _baseClass);
                     if(_didHide)