diff --git a/README.md b/README.md index ff829b37..ab36bf4a 100644 --- a/README.md +++ b/README.md @@ -244,6 +244,19 @@ In the example the current list `.sortable` allows items within it to be sorted If you want to be able to move items between to sortables, the `acceptFrom` option must be present on both of them. +Can also accept a callback function with `destinationSortable` and `draggedElement` as paramaters, This function should return `true` or `false`: + +``` javascript +sortable('.sortable', { + acceptFrom: function(destinationSortable, draggedElement){ + if(draggedElement.classList.contains('canDrop')){ + return true; + } else { + return false; + } + } +}); + ### placeholder Use the `placeholder` option to specify the markup of the placeholder: diff --git a/src/html5sortable.ts b/src/html5sortable.ts index 3e80eed6..65be5c1c 100644 --- a/src/html5sortable.ts +++ b/src/html5sortable.ts @@ -457,7 +457,7 @@ export default function sortable (sortableElements, options: configuration|objec * Fires when valid drop target area is hit */ on(sortableElement, 'drop', function (e) { - if (!listsConnected(sortableElement, dragging.parentElement)) { + if (!listsConnected(sortableElement, dragging)) { return } e.preventDefault() @@ -622,7 +622,7 @@ export default function sortable (sortableElements, options: configuration|objec let element = e.target const sortableElement = element.isSortable === true ? element : findSortable(element, e) element = findDragElement(sortableElement, element) - if (!dragging || !listsConnected(sortableElement, dragging.parentElement) || data(sortableElement, '_disabled') === 'true') { + if (!dragging || !listsConnected(sortableElement, dragging) || data(sortableElement, '_disabled') === 'true') { return } const options = data(sortableElement, 'opts') diff --git a/src/isConnected.ts b/src/isConnected.ts index e5b5fa46..c90303b3 100644 --- a/src/isConnected.ts +++ b/src/isConnected.ts @@ -2,29 +2,33 @@ import store from './store' /** * Check if curList accepts items from destList * @param {sortable} destination the container an item is move to - * @param {sortable} origin the container an item comes from + * @param {sortable} dom node currently being dragged */ -export default (destination: sortable, origin: sortable) => { +export default (destination: sortable, dragging: node) => { // check if valid sortable if (destination.isSortable === true) { const acceptFrom = store(destination).getConfig('acceptFrom') // check if acceptFrom is valid - if (acceptFrom !== null && acceptFrom !== false && typeof acceptFrom !== 'string') { + if (acceptFrom !== null && acceptFrom !== false && typeof acceptFrom !== 'string' && typeof acceptFrom !== 'function') { throw new Error('HTML5Sortable: Wrong argument, "acceptFrom" must be "null", "false", or a valid selector string.') } if (acceptFrom !== null) { - return acceptFrom !== false && acceptFrom.split(',').filter(function (sel) { - return sel.length > 0 && origin.matches(sel) - }).length > 0 + if (typeof acceptFrom === 'function') { + return acceptFrom(destination, dragging); + } else { + return acceptFrom !== false && acceptFrom.split(',').filter(function (sel) { + return sel.length > 0 && dragging.parentElement.matches(sel) + }).length > 0 + } } // drop in same list - if (destination === origin) { + if (destination === dragging.parentElement) { return true } // check if lists are connected with connectWith - if (store(destination).getConfig('connectWith') !== undefined && store(destination).getConfig('connectWith') !== null) { - return store(destination).getConfig('connectWith') === store(origin).getConfig('connectWith') + if ((store(destination).getConfig('connectWith') !== undefined && store(destination).getConfig('connectWith') !== null) && store(dragging.parentElement).getConfig('connectWith') !== undefined && store(dragging.parentElement).getConfig('connectWith') !== null) { + return store(destination).getConfig('connectWith') === store(dragging.parentElement).getConfig('connectWith') } } return false