diff --git a/README.md b/README.md index 426f172..4728347 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ Use the dnd-list attribute to make your list element a dropzone. Usually you wil * `dnd-disable-if` Optional boolean expression. When it evaluates to true, no dropping into the list is possible. Note that this also disables rearranging items inside the list. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types) * `dnd-horizontal-list` Optional boolean expression. When it evaluates to true, the positioning algorithm will use the left and right halfs of the list items instead of the upper and lower halfs. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced) * `dnd-external-sources` Optional boolean expression. When it evaluates to true, the list accepts drops from sources outside of the current browser tab, which allows to drag and drop accross different browser tabs. The only major browser for which this is currently not working is Microsoft Edge. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced) +* `dnd-no-placeholder` Optional attribute. When it is defined the list will not add child element with class dndPlaceholder and the index in callbacks will always be undefined. **Callbacks** * `dnd-dragover` Optional expression that is invoked when an element is dragged over the list. If the expression is set, but does not return true, the element is not allowed to be dropped. The following variables will be available: diff --git a/angular-drag-and-drop-lists.js b/angular-drag-and-drop-lists.js index 8a07ce3..d09371f 100644 --- a/angular-drag-and-drop-lists.js +++ b/angular-drag-and-drop-lists.js @@ -227,6 +227,9 @@ * drops from sources outside of the current browser tab. This allows to * drag and drop accross different browser tabs. The only major browser * that does not support this is currently Microsoft Edge. + * - dnd-no-placeholder Optional attribute. When it is defined the list will + * not add child element with class dndPlaceholder and the index in + * callbacks will always be undefined. * * Callbacks: * - dnd-dragover Optional expression that is invoked when an element is dragged over the @@ -271,12 +274,14 @@ */ dndLists.directive('dndList', ['$parse', function($parse) { return function(scope, element, attr) { + var doNotUsePlaceholder = 'dndNoPlaceholder' in attr; // While an element is dragged over the list, this placeholder element is inserted // at the location where the element would be inserted after dropping. - var placeholder = getPlaceholderElement(); - placeholder.remove(); - - var placeholderNode = placeholder[0]; + if (!doNotUsePlaceholder) { + var placeholder = getPlaceholderElement(); + placeholder.remove(); + var placeholderNode = placeholder[0]; + } var listNode = element[0]; var listSettings = {}; @@ -316,7 +321,7 @@ if (!mimeType || !isDropAllowed(itemType)) return true; // Make sure the placeholder is shown, which is especially important if the list is empty. - if (placeholderNode.parentNode != listNode) { + if (!doNotUsePlaceholder && placeholderNode.parentNode != listNode) { element.append(placeholder); } @@ -327,7 +332,7 @@ listItemNode = listItemNode.parentNode; } - if (listItemNode.parentNode == listNode && listItemNode != placeholderNode) { + if (!doNotUsePlaceholder && listItemNode.parentNode == listNode && listItemNode != placeholderNode) { // If the mouse pointer is in the upper half of the list item element, // we position the placeholder before the list item, otherwise after it. var rect = listItemNode.getBoundingClientRect(); @@ -518,7 +523,8 @@ * Small helper function that cleans up if we aborted a drop. */ function stopDragover() { - placeholder.remove(); + if (!doNotUsePlaceholder) + placeholder.remove(); element.removeClass("dndDragover"); return true; } @@ -543,7 +549,8 @@ * object needs to be inserted */ function getPlaceholderIndex() { - return Array.prototype.indexOf.call(listNode.children, placeholderNode); + if (!doNotUsePlaceholder) + return Array.prototype.indexOf.call(listNode.children, placeholderNode); } /** diff --git a/angular-drag-and-drop-lists.min.js b/angular-drag-and-drop-lists.min.js index 0d957a6..c47b3be 100644 --- a/angular-drag-and-drop-lists.min.js +++ b/angular-drag-and-drop-lists.min.js @@ -11,27 +11,29 @@ e.directive("dndDraggable",["$parse","$timeout",function(e,i){return function(l,f,c){f.attr("draggable","true"),c.dndDisableIf&&l.$watch(c.dndDisableIf,function(e){f.attr("draggable",!e)}),f.on("dragstart",function(s){if(s=s.originalEvent||s,"false"==f.attr("draggable"))return!0 o.isDragging=!0,o.itemType=c.dndType&&l.$eval(c.dndType).toLowerCase(),o.dropEffect="none",o.effectAllowed=c.dndEffectAllowed||d[0],s.dataTransfer.effectAllowed=o.effectAllowed var g=l.$eval(c.dndDraggable),u=a+(o.itemType?"-"+o.itemType:"") -try{s.dataTransfer.setData(u,angular.toJson(g))}catch(p){var v=angular.toJson({item:g,type:o.itemType}) -try{s.dataTransfer.setData(r,v)}catch(p){var D=n(d,o.effectAllowed) -s.dataTransfer.effectAllowed=D[0],s.dataTransfer.setData(t,v)}}if(f.addClass("dndDragging"),i(function(){f.addClass("dndDraggingSource")},0),s._dndHandle&&s.dataTransfer.setDragImage&&s.dataTransfer.setDragImage(f[0],0,0),e(c.dndDragstart)(l,{event:s}),c.dndCallback){var y=e(c.dndCallback) -o.callback=function(e){return y(l,e||{})}}s.stopPropagation()}),f.on("dragend",function(n){n=n.originalEvent||n,l.$apply(function(){var a=o.dropEffect,r={copy:"dndCopied",link:"dndLinked",move:"dndMoved",none:"dndCanceled"} -e(c[r[a]])(l,{event:n}),e(c.dndDragend)(l,{event:n,dropEffect:a})}),o.isDragging=!1,o.callback=void 0,f.removeClass("dndDragging"),f.removeClass("dndDraggingSource"),n.stopPropagation(),i(function(){f.removeClass("dndDraggingSource")},0)}),f.on("click",function(n){c.dndSelected&&(n=n.originalEvent||n,l.$apply(function(){e(c.dndSelected)(l,{event:n})}),n.stopPropagation())}),f.on("selectstart",function(){this.dragDrop&&this.dragDrop()})}}]),e.directive("dndList",["$parse",function(e){return function(i,l,f){function c(e){if(!e)return t +try{s.dataTransfer.setData(u,angular.toJson(g))}catch(e){var p=angular.toJson({item:g,type:o.itemType}) +try{s.dataTransfer.setData(r,p)}catch(e){var v=n(d,o.effectAllowed) +s.dataTransfer.effectAllowed=v[0],s.dataTransfer.setData(t,p)}}if(f.addClass("dndDragging"),i(function(){f.addClass("dndDraggingSource")},0),s._dndHandle&&s.dataTransfer.setDragImage&&s.dataTransfer.setDragImage(f[0],0,0),e(c.dndDragstart)(l,{event:s}),c.dndCallback){var D=e(c.dndCallback) +o.callback=function(e){return D(l,e||{})}}s.stopPropagation()}),f.on("dragend",function(n){n=n.originalEvent||n,l.$apply(function(){var a=o.dropEffect +e(c[{copy:"dndCopied",link:"dndLinked",move:"dndMoved",none:"dndCanceled"}[a]])(l,{event:n}),e(c.dndDragend)(l,{event:n,dropEffect:a})}),o.isDragging=!1,o.callback=void 0,f.removeClass("dndDragging"),f.removeClass("dndDraggingSource"),n.stopPropagation(),i(function(){f.removeClass("dndDraggingSource")},0)}),f.on("click",function(n){c.dndSelected&&(n=n.originalEvent||n,l.$apply(function(){e(c.dndSelected)(l,{event:n})}),n.stopPropagation())}),f.on("selectstart",function(){this.dragDrop&&this.dragDrop()})}}]),e.directive("dndList",["$parse",function(e){return function(i,l,f){function c(e){if(!e)return t for(var n=0;n")}var T=y() +a.hasClass("dndPlaceholder")&&(e=a)}),e||angular.element("
  • ")}() T.remove() -var h=T[0],m=l[0],E={} +var h=T[0]}var m=l[0],E={} l.on("dragenter",function(e){e=e.originalEvent||e var n=f.dndAllowedTypes&&i.$eval(f.dndAllowedTypes) E={allowedTypes:angular.isArray(n)&&n.join("|").toLowerCase().split("|"),disabled:f.dndDisableIf&&i.$eval(f.dndDisableIf),externalSources:f.dndExternalSources&&i.$eval(f.dndExternalSources),horizontal:f.dndHorizontalList&&i.$eval(f.dndHorizontalList)} var a=c(e.dataTransfer.types) -return a&&g(s(a))?void e.preventDefault():!0}),l.on("dragover",function(e){e=e.originalEvent||e +if(!a||!g(s(a)))return!0 +e.preventDefault()}),l.on("dragover",function(e){e=e.originalEvent||e var n=c(e.dataTransfer.types),a=s(n) if(!n||!g(a))return!0 -if(h.parentNode!=m&&l.append(T),e.target!=m){for(var r=e.target;r.parentNode!=m&&r.parentNode;)r=r.parentNode -if(r.parentNode==m&&r!=h){var d=r.getBoundingClientRect() +if(y||h.parentNode==m||l.append(T),e.target!=m){for(var r=e.target;r.parentNode!=m&&r.parentNode;)r=r.parentNode +if(!y&&r.parentNode==m&&r!=h){var d=r.getBoundingClientRect() if(E.horizontal)var o=e.clientX