Sortable icon indicating copy to clipboard operation
Sortable copied to clipboard

Provide method for to enable/disable dropzones so not-allowed cursor is displayed.

Open rouilj opened this issue 3 years ago • 2 comments

Is your feature request related to a problem? Please describe. I am implementing a simple kanban. When dragging around the screen outside of a dropzone the not-allowed cursor (circle with a line through it) is shown. I would like to have the not-allowed cursor displayed when it is over a dropzone that is not an allowed destination for the draggable. So if the draggable item is not over a Sortable with a matching put group or the draggable is not over a dropzone that is part of the source pull array the user gets feedback they they can't drop.

Describe the solution you'd like I would like to to happen automatically without needing to do anything.

I have noted that removing the dragOver handler (using developer tools) from the Sortable dropzone element I can get the desired cursor (chrome).

However I need to be able to add/remove the handler from javascript.

Describe alternatives you've considered Tying this to Sortable.option('disabled', true) so the dragOver (or dragEnter) handler is disabled/removed and re-enabled when Sortable.option('disabled', false) is called would be better. I envision it being called from the onStart handler by iterating over all Sortable items and disabling disallowed drop targets.

However adding a methods to enable/disable the drag handlers that can be manually called would work as well.

Additional context https://output.jsbin.com/jufinuz/

rouilj avatar Dec 03 '21 07:12 rouilj

You can block access to target group by setting the pointer-events to none. you can do this with the onChoose/unChoose function as example. you will get the 'forbidden' icon when you drag over the group which doesn't allow to be dragged into. See for an example on jsbin.

PlippiePlop avatar Apr 07 '22 12:04 PlippiePlop

Thanks. I got it working. Had to extract the put settings into a variable rather than hard coding it so I could programmatically calculate the ul's that needed to have the classes changed. It looks like the put list/array specified with the group property is not available from the event passed to onChoose or onUnchoose.

I still think it is something that should be done by the library though.

rouilj avatar Apr 11 '22 17:04 rouilj