From 2a0efe9c37c9d4e62a66b3314ed277b9a1f04072 Mon Sep 17 00:00:00 2001 From: mike16889 <33011308+mike16889@users.noreply.github.com> Date: Fri, 22 Jan 2021 20:42:57 +1100 Subject: [PATCH 1/5] Add callback support to acceptFrom Add ability for acceptFrom to accept a function returning true/false on whether the currently dragged dom node can be accepted by the sortable --- src/isConnected.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/isConnected.ts b/src/isConnected.ts index e5b5fa46..69aacec8 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, draggable: 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') + return store(destination).getConfig('connectWith') === store(dragging.parentElement).getConfig('connectWith') } } return false From ce0a3b1381ab4a3410fa767da58f5bbac21713ee Mon Sep 17 00:00:00 2001 From: mike16889 <33011308+mike16889@users.noreply.github.com> Date: Fri, 22 Jan 2021 20:50:28 +1100 Subject: [PATCH 2/5] Callback support for acceptFrom Supporting changes for adding callback support to acceptFrom --- src/html5sortable.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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') From 8f4b73e61183cc32d46fcdfadbd596dbded6f04c Mon Sep 17 00:00:00 2001 From: mike16889 <33011308+mike16889@users.noreply.github.com> Date: Fri, 22 Jan 2021 21:02:32 +1100 Subject: [PATCH 3/5] Update readme for acceptFrom callback --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index ab51d915..231a8ec9 100644 --- a/README.md +++ b/README.md @@ -243,6 +243,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: From 379a3cd339c880ab0a5db93cb84a7e87bac61c0b Mon Sep 17 00:00:00 2001 From: mike16889 <33011308+mike16889@users.noreply.github.com> Date: Fri, 22 Jan 2021 21:11:28 +1100 Subject: [PATCH 4/5] fix for typo --- src/isConnected.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/isConnected.ts b/src/isConnected.ts index 69aacec8..f25651c3 100644 --- a/src/isConnected.ts +++ b/src/isConnected.ts @@ -4,7 +4,7 @@ import store from './store' * @param {sortable} destination the container an item is move to * @param {sortable} dom node currently being dragged */ -export default (destination: sortable, draggable: node) => { +export default (destination: sortable, dragging: node) => { // check if valid sortable if (destination.isSortable === true) { const acceptFrom = store(destination).getConfig('acceptFrom') From d98c689e678d4bdbb3d8139d52fd69d16cead718 Mon Sep 17 00:00:00 2001 From: mike16889 <33011308+mike16889@users.noreply.github.com> Date: Fri, 22 Jan 2021 21:17:29 +1100 Subject: [PATCH 5/5] fix existing bug? --- src/isConnected.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/isConnected.ts b/src/isConnected.ts index f25651c3..c90303b3 100644 --- a/src/isConnected.ts +++ b/src/isConnected.ts @@ -27,7 +27,7 @@ export default (destination: sortable, dragging: node) => { return true } // check if lists are connected with connectWith - if (store(destination).getConfig('connectWith') !== undefined && store(destination).getConfig('connectWith') !== null) { + 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') } }