diff --git a/dragster.mouse.touch.js b/dragster.mouse.touch.js index 81eac02..d21b949 100644 --- a/dragster.mouse.touch.js +++ b/dragster.mouse.touch.js @@ -1,5 +1,5 @@ /*! - * Dragster - drag'n'drop library v1.0.3 + * Dragster - drag'n'drop library v1.0.4 * https://github.com/sunpietro/dragster * * Copyright 2015 Piotr Nalepa @@ -8,7 +8,7 @@ * Released under the MIT license * https://github.com/sunpietro/dragster/blob/master/LICENSE * - * Date: 2015-03-26T19:50Z + * Date: 2015-04-23T22:44Z */ (function (window, document) { window.DD = function (params) { @@ -18,10 +18,13 @@ CLASS_REGION = 'dragster-drag-region', CLASS_PLACEHOLDER = 'dragster-drop-placeholder', CLASS_TEMP_ELEMENT = 'dragster-temp', + CLASS_TEMP_CONTAINER = 'dragster-temp-container', CLASS_HIDDEN = 'dragster-is-hidden', + CLASS_REPLACABLE = 'dragster-replacable', finalParams = { elementSelector: '.dragster-block', - regionSelector: '.dragster-region' + regionSelector: '.dragster-region', + replaceElements: false }, draggableAttrName = 'draggable', placeholderAttrName = 'data-placeholder-position', @@ -34,6 +37,7 @@ getElement, shadowElement, shadowElementRegion, + tempContainer, draggedElement, draggableElements, regionEventHandlers, @@ -47,7 +51,8 @@ createPlaceholder, hideShadowElementTimeout, removeElements, - cleanWorkspace; + cleanWorkspace, + cleanReplacables; // merge the object with default config with an object with params provided by a developer for (key in params) { @@ -60,6 +65,15 @@ draggableElements = Array.prototype.slice.call(document.querySelectorAll(finalParams.elementSelector)); regions = Array.prototype.slice.call(document.querySelectorAll(finalParams.regionSelector)); + if (finalParams.replaceElements) { + tempContainer = document.createElement('div'); + + tempContainer.classList.add(CLASS_HIDDEN); + tempContainer.classList.add(CLASS_TEMP_CONTAINER); + + document.body.appendChild(tempContainer); + } + /* * Check whether a given element meets the requirements from the callback. * The callback should always return Boolean value - true or false. @@ -89,7 +103,7 @@ * @param element {Element} DOM element */ removeElements = function (selector) { - var elements = Array.prototype.slice.call(document.querySelectorAll(selector)); + var elements = Array.prototype.slice.call(document.getElementsByClassName(selector)); elements.forEach(function (element) { element.parentNode.removeChild(element); @@ -116,8 +130,14 @@ element.classList.remove(CLASS_DRAGGING); } - removeElements('.' + CLASS_PLACEHOLDER); - removeElements('.' + CLASS_TEMP_ELEMENT); + removeElements(CLASS_PLACEHOLDER); + removeElements(CLASS_TEMP_ELEMENT); + }; + + cleanReplacables = function () { + (Array.prototype.slice.call(document.getElementsByClassName(CLASS_REPLACABLE))).forEach(function (elem) { + elem.classList.remove(CLASS_REPLACABLE); + }); }; /* @@ -298,22 +318,32 @@ dropTargetRegion = dropTarget.getBoundingClientRect(); maxDistance = dropTargetRegion.height / 2; - if ((elementPositionY - dropTargetRegion.top) < maxDistance && !visiblePlaceholder.top) { - removeElements('.' + CLASS_PLACEHOLDER); - placeholder.setAttribute(placeholderAttrName, 'top'); - insertBefore(dropTarget.firstChild, placeholder); - } else if ((dropTargetRegion.bottom - elementPositionY) < maxDistance && !visiblePlaceholder.bottom) { - removeElements('.' + CLASS_PLACEHOLDER); - placeholder.setAttribute(placeholderAttrName, 'bottom'); - dropTarget.appendChild(placeholder); + cleanReplacables(); + + if (!finalParams.replaceElements) { + if ((elementPositionY - dropTargetRegion.top) < maxDistance && !visiblePlaceholder.top) { + removeElements(CLASS_PLACEHOLDER); + placeholder.setAttribute(placeholderAttrName, 'top'); + insertBefore(dropTarget.firstChild, placeholder); + } else if ((dropTargetRegion.bottom - elementPositionY) < maxDistance && !visiblePlaceholder.bottom) { + removeElements(CLASS_PLACEHOLDER); + placeholder.setAttribute(placeholderAttrName, 'bottom'); + dropTarget.appendChild(placeholder); + } + } else { + dropTarget.classList.add(CLASS_REPLACABLE); } } else if (unknownTarget.classList.contains(CLASS_REGION) && - unknownTarget.querySelectorAll('.' + CLASS_DRAGGABLE).length === 0 && - unknownTarget.querySelectorAll('.' + CLASS_PLACEHOLDER).length === 0) { + unknownTarget.getElementsByClassName(CLASS_DRAGGABLE).length === 0 && + unknownTarget.getElementsByClassName(CLASS_PLACEHOLDER).length === 0) { placeholder = createPlaceholder(); unknownTarget.appendChild(placeholder); } else if (!unknownTarget.classList.contains(CLASS_REGION)) { - removeElements('.' + CLASS_PLACEHOLDER); + if (!finalParams.replaceElements) { + removeElements(CLASS_PLACEHOLDER); + } else { + cleanReplacables(); + } } }, /* @@ -329,7 +359,8 @@ * @param event {Object} event object */ mouseup: function (event) { - var dropTarget = document.querySelector('.' + CLASS_PLACEHOLDER), + var findByClass = finalParams.replaceElements ? CLASS_REPLACABLE : CLASS_PLACEHOLDER, + dropTarget = document.getElementsByClassName(findByClass)[0], dropDraggableTarget, placeholderPosition, unlistenToEventName = event.type === 'touchstart' ? 'touchmove' : 'mousemove', @@ -339,11 +370,9 @@ cleanWorkspace(draggedElement, unlistenToEventName); }, 200); - if (!draggedElement) { - return false; - } + cleanReplacables(); - if (!dropTarget) { + if (!draggedElement || !dropTarget) { cleanWorkspace(draggedElement, unlistenToEventName); return false; @@ -353,18 +382,27 @@ dropDraggableTarget = dropDraggableTarget || dropTarget; if (draggedElement !== dropDraggableTarget) { - dropTemp = createElementWrapper(); - dropTemp.innerHTML = draggedElement.innerHTML; - placeholderPosition = dropTarget.getAttribute(placeholderAttrName); - - if (placeholderPosition === 'top') { - insertBefore(dropDraggableTarget, dropTemp); + if (!finalParams.replaceElements) { + dropTemp = createElementWrapper(); + dropTemp.innerHTML = draggedElement.innerHTML; + placeholderPosition = dropTarget.getAttribute(placeholderAttrName); + + if (placeholderPosition === 'top') { + insertBefore(dropDraggableTarget, dropTemp); + } else { + insertAfter(dropDraggableTarget, dropTemp); + } + draggedElement.parentNode.removeChild(draggedElement); } else { - insertAfter(dropDraggableTarget, dropTemp); + dropTemp = document.getElementsByClassName(CLASS_TEMP_CONTAINER)[0]; + dropTemp.innerHTML = draggedElement.innerHTML; + + draggedElement.innerHTML = dropDraggableTarget.innerHTML; + dropDraggableTarget.innerHTML = dropTemp.innerHTML; + dropTemp.innerHTML = ''; } dropDraggableTarget.classList.remove(CLASS_DRAGOVER); - draggedElement.parentNode.removeChild(draggedElement); } cleanWorkspace(draggedElement, unlistenToEventName); diff --git a/dragster.mouse.touch.min.js b/dragster.mouse.touch.min.js index 2270979..1f716b3 100644 --- a/dragster.mouse.touch.min.js +++ b/dragster.mouse.touch.min.js @@ -1,5 +1,5 @@ /*! - * Dragster - drag'n'drop library v1.0.3 + * Dragster - drag'n'drop library v1.0.4 * https://github.com/sunpietro/dragster * * Copyright 2015 Piotr Nalepa @@ -8,6 +8,6 @@ * Released under the MIT license * https://github.com/sunpietro/dragster/blob/master/LICENSE * - * Date: 2015-03-26T19:50Z + * Date: 2015-04-23T22:44Z */ -(function(e,t){e.DD=function(e){var n="is-dragging",o="is-drag-over",r="dragster-draggable",s="dragster-drag-region",i="dragster-drop-placeholder",a="dragster-temp",l="dragster-is-hidden",c={elementSelector:".dragster-block",regionSelector:".dragster-region"},d="draggable",u="data-placeholder-position",f={top:false,bottom:false},m,p,v,h,g,L,y,E,b,w,A,C,S,T,q,B,N,x,D;for(m in e){if(e.hasOwnProperty(m)){c[m]=e[m]}}y=Array.prototype.slice.call(t.querySelectorAll(c.elementSelector));p=Array.prototype.slice.call(t.querySelectorAll(c.regionSelector));v=function(e,t){var n=e.parentNode;if(!n||e.classList&&e.classList.contains(s)){return undefined}if(t(e)){return e}return t(n)?n:v(n,t)};x=function(e){var n=Array.prototype.slice.call(t.querySelectorAll(e));n.forEach(function(e){e.parentNode.removeChild(e)})};D=function(e,o){p.forEach(function(e){e.removeEventListener(o,E.mousemove)});t.body.removeEventListener(o,E.mousemove);if(e){e.classList.remove(n)}x("."+i);x("."+a)};T=function(){var e=t.createElement("div");e.setAttribute(d,true);e.classList.add(r);return e};B=function(){var e=t.createElement("div");e.classList.add(i);return e};q=function(){var e=t.createElement("div");e.classList.add(a);e.classList.add(l);t.body.appendChild(e);return e};C=function(e,t){e.parentNode.insertBefore(t,e.nextSibling)};S=function(e,t){e.parentNode.insertBefore(t,e)};A=function(e){return e.classList&&e.classList.contains(s)};w=function(e){return e.classList&&e.classList.contains(r)};b=function(e){return e.classList&&e.classList.contains(i)};E={mousedown:function(e){e.preventDefault();if(e.which===3){return false}var o,r=e.type==="touchstart"?"touchmove":"mousemove";p.forEach(function(e){e.addEventListener(r,E.mousemove)});t.body.addEventListener(r,E.mousemove);L=v(e.target,w);if(!L){return false}o=L.getBoundingClientRect();h=q();h.innerHTML=L.innerHTML;h.style.width=o.width+"px";h.style.height=o.height+"px";g=h.getBoundingClientRect();L.classList.add(n)},mousemove:function(e){e.preventDefault();var n=e.changedTouches?e.changedTouches[0]:e,o=n.view?n.view.pageXOffset:0,a=n.view?n.view.pageYOffset:0,c=n.clientY+a,d=n.clientX+o,m=t.elementFromPoint(n.clientX,n.clientY),p=v(m,w),y,E,b;clearTimeout(N);h.style.top=c+25+"px";h.style.left=d-g.width/2+"px";h.classList.remove(l);if(p&&p!==L){b=B();y=p.getBoundingClientRect();E=y.height/2;if(c-y.topDragster Block 2.1 (function () { var dd = new DD({ elementSelector: '.dragster-block', - regionSelector: '.dragster-region' + regionSelector: '.dragster-region', + replaceElements: true }); })();