Skip to content

Commit

Permalink
Merge pull request #9 from sunpietro/replacing-elements
Browse files Browse the repository at this point in the history 
Fixed #9 #8
  • Loading branch information
@sunpietro
sunpietro committed Apr 23, 2015
2 parents 3d0d407 + a128228 commit e36b343
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 38 deletions.
100 changes: 69 additions & 31 deletions dragster.mouse.touch.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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) {
Expand All @@ -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',
Expand All @@ -34,6 +37,7 @@
getElement,
shadowElement,
shadowElementRegion,
tempContainer,
draggedElement,
draggableElements,
regionEventHandlers,
Expand All @@ -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) {
Expand All @@ -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.
Expand Down Expand Up @@ -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);
Expand All @@ -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);
});
};

/*
Expand Down Expand Up @@ -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();
}
}
},
/*
Expand All @@ -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',
Expand All @@ -339,11 +370,9 @@
cleanWorkspace(draggedElement, unlistenToEventName);
}, 200);

if (!draggedElement) {
return false;
}
cleanReplacables();

if (!dropTarget) {
if (!draggedElement || !dropTarget) {
cleanWorkspace(draggedElement, unlistenToEventName);

return false;
Expand All @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions dragster.mouse.touch.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 7 additions & 3 deletions dragster.style.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Dragster - drag'n'drop library v1.0.2
* Dragster - drag'n'drop library v1.0.4
* https://github.com/sunpietro/dragster
*
* Copyright 2015 Piotr Nalepa
Expand All @@ -8,9 +8,8 @@
* Released under the MIT license
* https://github.com/sunpietro/dragster/blob/master/LICENSE
*
* Date: 2015-03-26T19:50Z
* Date: 2015-04-23T22:44Z
*/

* {
box-sizing: border-box;
}
Expand Down Expand Up @@ -90,7 +89,12 @@ body {
border: 1px dashed #000;
}

.dragster-is-hidden,
.dragster-temp.dragster-is-hidden {
opacity: 0;
box-shadow: none;
}

.dragster-draggable.dragster-replacable {
outline: 2px solid #b30;
}
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ <h3>Dragster Block 2.1</h3>
(function () {
var dd = new DD({
elementSelector: '.dragster-block',
regionSelector: '.dragster-region'
regionSelector: '.dragster-region',
replaceElements: true
});
})();
</script>
Expand Down

0 comments on commit e36b343

Please sign in to comment.