diff --git a/README.md b/README.md
index 4a5a6be..6d95582 100644
--- a/README.md
+++ b/README.md
@@ -114,7 +114,13 @@ Tell the dragster to scroll window while dragging an element. Default value: `fa
The drag-only region CSS class name. Used to identify regions. Default value: `'dragster-region--drag-only'`.
### cloneElements - {Boolean}
The flag stating the elements can be cloned from region to region. Requires `dragOnlyRegionCssClass` to be applied in the HTML markup of a page. Default value: `false`.
+### wrapDraggableElements - {Boolean}
+By default all draggable elements are wrapped in a wrapper `
`, by settings this variable to `false` this behavior can be disabled. This can sometimes be useful when using the script in frameworks like Angular or such.
+**IMPORTANT**
+
+If you put this value to `false`, you **MUST** do the wrapping of the elements yourself.
+A wrapper container looks like this `
...
`
## Properties - callbacks
These properties allow a developer to control the behaviour of dragster.js library using callbacks.
@@ -139,4 +145,4 @@ After drop callback.
## Methods
List of methods ready to be used by any webdeveloper:
### update
-Updates a reference to draggable elements. For example, when user adds a new element to any of droppable regions then running `update` method makes a new element draggable as well.
+Updates a reference to draggable elements. For example, when user adds a new element to any of droppable regions then running `update` method makes a new element draggable as well.
\ No newline at end of file
diff --git a/dragster.js b/dragster.js
index 1fe4c93..c75f71a 100644
--- a/dragster.js
+++ b/dragster.js
@@ -54,7 +54,8 @@
onAfterDragDrop: dummyCallback,
scrollWindowOnDrag: FALSE,
dragOnlyRegionsEnabled: FALSE,
- cloneElements: FALSE
+ cloneElements: FALSE,
+ wrapDraggableElements: TRUE
},
draggableAttrName = 'draggable',
placeholderAttrName = 'data-placeholder-position',
@@ -201,6 +202,17 @@
* @return {Array}
*/
wrapDraggableElements = function (elements) {
+ if (finalParams.wrapDraggableElements === FALSE) {
+ console.warn(
+ 'You have disabled the default behavior of wrapping the draggable elements, ' +
+ 'if you want dragster to work properly you still will have to do this manually.\n' +
+ '\n' +
+ 'More inf: https://github.com/sunpietro/dragster/blob/master/README.md#user-content-wrapdraggableelements---boolean'
+ );
+
+ return FALSE;
+ }
+
elements.forEach(function (draggableElement) {
var wrapper = createElementWrapper(),
draggableParent = draggableElement.parentNode;
diff --git a/dragster.min.js b/dragster.min.js
index 4c1e943..1951393 100644
--- a/dragster.min.js
+++ b/dragster.min.js
@@ -10,4 +10,4 @@
*
* Date: 2016-11-23T17:20Z
*/
-!function(e,t){"use strict";e.Dragster=function(n){var o,r,a,s,i,l,d,c,u,g,m,p,f,h,v,E,L,y,C,B,w,D,b,T,N,A,H,S,R,M="dragster-",O="is-dragging",P="is-drag-over",I=M+"draggable",Y=M+"drag-region",q=M+"drop-placeholder",x=M+"temp",F=x+"-container",X=M+"is-hidden",J=M+"replacable",W=M+"region--drag-only",k="touchstart",z="touchmove",j="touchend",G="mousedown",K="mousemove",Q="mouseup",U="top",V="bottom",Z="px",$="div",_=!1,ee=!0,te=function(){},ne={elementSelector:".dragster-block",regionSelector:".dragster-region",dragOnlyRegionCssClass:W,replaceElements:_,updateRegionsHeight:ee,minimumRegionHeight:60,onBeforeDragStart:te,onAfterDragStart:te,onBeforeDragMove:te,onAfterDragMove:te,onBeforeDragEnd:te,onAfterDragEnd:te,onAfterDragDrop:te,scrollWindowOnDrag:_,dragOnlyRegionsEnabled:_,cloneElements:_},oe="draggable",re="data-placeholder-position",ae={top:_,bottom:_},se={drag:{node:{}},drop:{node:{}},shadow:{node:{},top:0,left:0},placeholder:{node:{},position:""},dropped:null,clonedFrom:null,clonedTo:null},ie=e.innerHeight;for(r in n)n.hasOwnProperty(r)&&(ne[r]=n[r]);return b=function(){return[].slice.call(t.querySelectorAll(ne.elementSelector))},T=function(e){e.forEach(function(e){var t=E(),n=e.parentNode;return n.classList.contains(I)?_:(n.insertBefore(t,e),n.removeChild(e),void t.appendChild(e))})},u=b(),a=[].slice.call(t.querySelectorAll(ne.regionSelector)),ne.replaceElements&&(d=t.createElement($),d.classList.add(X),d.classList.add(F),t.body.appendChild(d)),s=function(e,t){var n=e.parentNode;if(n&&(!e.classList||!e.classList.contains(Y)||e.classList.contains(W)))return t(e)?e:t(n)?n:s(n,t)},B=function(e){var n=[].slice.call(t.getElementsByClassName(e));n.forEach(function(e){e.parentNode.removeChild(e)})},w=function(e,n){n&&(a.forEach(function(e){e.removeEventListener(n,g.mousemove)}),t.body.removeEventListener(n,g.mousemove)),e&&e.classList.remove(O),[].slice.call(t.getElementsByClassName(I)).forEach(function(e){e.firstChild||e.parentNode.removeChild(e)}),B(q),B(x),N()},D=function(){[].slice.call(t.getElementsByClassName(J)).forEach(function(e){e.classList.remove(J)})},E=function(){var e=t.createElement($);return e.setAttribute(oe,ee),e.classList.add(I),e},y=function(){var e=t.createElement($);return e.classList.add(q),e},L=function(){var e=t.createElement($);return e.classList.add(x),e.classList.add(X),e.style.position="fixed",t.body.appendChild(e),e},h=function(e,t){e&&e.parentNode&&e.parentNode.insertBefore(t,e.nextSibling)},v=function(e,t){e&&e.parentNode&&e.parentNode.insertBefore(t,e)},p=function(e){return e.classList&&e.classList.contains(I)},m=function(e){return e.classList&&e.classList.contains(q)},f=function(e){return e.classList&&e.classList.contains(ne.dragOnlyRegionCssClass)},N=function(){if(ne.updateRegionsHeight){var n=[].slice.call(t.getElementsByClassName(Y));n.forEach(function(t){var n=[].slice.call(t.querySelectorAll(ne.elementSelector)),o=ne.minimumRegionHeight;n.length&&(n.forEach(function(t){var n=e.getComputedStyle(t);o+=t.offsetHeight+parseInt(n.marginTop,10)+parseInt(n.marginBottom,10)}),t.style.height=o+Z)})}},g={mousedown:function(e){var n,r;return e.dragster=o,ne.onBeforeDragStart(e)===_||3===e.which?_:(e.preventDefault(),r=e.type===k?z:K,a.forEach(function(e){e.addEventListener(r,g.mousemove)}),t.body.addEventListener(r,g.mousemove),(c=s(e.target,p))?(n=c.getBoundingClientRect(),i=L(),i.innerHTML=c.innerHTML,i.style.width=n.width+Z,i.style.height=n.height+Z,l=i.getBoundingClientRect(),c.classList.add(O),o=JSON.parse(JSON.stringify(se)),o.drag.node=c,o.shadow.node=i,e.dragster=o,void ne.onAfterDragStart(e)):_)},mousemove:function(e){if(e.dragster=o,ne.onBeforeDragMove(e)===_)return _;e.preventDefault();var n=e.changedTouches?e.changedTouches[0]:e,r=n.view?n.view.pageXOffset:0,a=n.view?n.view.pageYOffset:0,d=n.clientY+a,u=n.clientX+r,g=t.elementFromPoint(n.clientX,n.clientY),m=s(g,p),h=n.clientY,v=u-l.width/2,E=!(!m||!s(m,f)),L=g.classList.contains(Y),y=g.classList.contains(W),B=g.classList.contains(q),w=g.getElementsByClassName(I).length>0,D=g.getElementsByClassName(q).length>0;clearTimeout(C),i.style.top=h+Z,i.style.left=v+Z,i.classList.remove(X),o.shadow.top=h,o.shadow.left=v,m&&m!==c&&!E?R.addPlaceholderOnTarget(m,d,a):!L||y||w||D?L&&!y&&w&&!D?R.addPlaceholderInRegionBelowTargets(g):L||B||R.removePlaceholders():R.addPlaceholderInRegion(g),ne.scrollWindowOnDrag&&A(e),N(),ne.onAfterDragMove(e)},mouseup:function(e){if(e.dragster=o,ne.onBeforeDragEnd(e)===_)return _;var n,r=ne.replaceElements?J:q,a=t.getElementsByClassName(r)[0],i=!(!c||!s(c,f)),l=e.type===k?z:K,d=ne.cloneElements&&i;return C=setTimeout(function(){w(c,l)},200),D(),c&&a?(n=s(a,p),n=n||a,c!==n&&(ne.replaceElements||d?ne.replaceElements&&!d?(e.dragster=S.replaceElements(e.dragster,n),ne.onAfterDragDrop(e)):!ne.replaceElements&&d&&(e.dragster=S.cloneElements(e.dragster,a,n),ne.onAfterDragDrop(e)):(e.dragster=S.moveElement(e.dragster,a,n),ne.onAfterDragDrop(e)),n.classList.remove(P)),w(c,l),void ne.onAfterDragEnd(e)):(w(c,l),_)}},R={addPlaceholderOnTarget:function(e,t,n){var r=e.getBoundingClientRect(),a=y(),s=r.height/2;D(),ne.replaceElements?e.classList.add(J):t-n-r.top
0,D=u.getElementsByClassName(q).length>0;clearTimeout(w),l.style.top=h+Z,l.style.left=v+Z,l.classList.remove(X),o.shadow.top=h,o.shadow.left=v,m&&m!==c&&!E?M.addPlaceholderOnTarget(m,d,a):!L||y||C||D?L&&!y&&C&&!D?M.addPlaceholderInRegionBelowTargets(u):L||b||M.removePlaceholders():M.addPlaceholderInRegion(u),ne.scrollWindowOnDrag&&N(e),A(),ne.onAfterDragMove(e)},mouseup:function(e){if(e.dragster=o,ne.onBeforeDragEnd(e)===_)return _;var n,r=ne.replaceElements?k:q,a=t.getElementsByClassName(r)[0],l=!(!c||!s(c,f)),i=e.type===W?z:K,d=ne.cloneElements&&l;return w=setTimeout(function(){C(c,i)},200),D(),c&&a?(n=s(a,p),n=n||a,c!==n&&(ne.replaceElements||d?ne.replaceElements&&!d?(e.dragster=S.replaceElements(e.dragster,n),ne.onAfterDragDrop(e)):!ne.replaceElements&&d&&(e.dragster=S.cloneElements(e.dragster,a,n),ne.onAfterDragDrop(e)):(e.dragster=S.moveElement(e.dragster,a,n),ne.onAfterDragDrop(e)),n.classList.remove(P)),C(c,i),void ne.onAfterDragEnd(e)):(C(c,i),_)}},M={addPlaceholderOnTarget:function(e,t,n){var r=e.getBoundingClientRect(),a=y(),s=r.height/2;D(),ne.replaceElements?e.classList.add(k):t-n-r.top