I've got two kendo sortable list wherein I can drag the multi-selected items left to right. All looks good but I experienced this weird behavior. The second time I drag diagonally upwards (north east), the placeholder "Drop here" will not appear until you move the mouse downward a little.
Start dragging "Strawberries" then "Pinapples" to the right list. Remember that your cursor should move north east until you reach the below of "Strawberries"
Is this a limitation of kendo drag and drop?
Here is the Dojo that I am using.
So, I looked the the kendo source code and used your code in a local project with a bunch of console.log()'s and here's what I found:
(The methods of interest are _drag() and _movePlaceholder() of the Sortable class)
This is how kendo is deciding whether or not to show the placeholder(call _movePlaceholder()) inside _drag():
if (axisDelta.y < 0 && (moveOnDragEnter || offsetDelta.top < 0)) {
direction = 'prev';
} else if (axisDelta.y > 0 && (moveOnDragEnter || offsetDelta.top > 0)) {
direction = 'next';
}
While you are moving the cursor upwards over the right-side dropzone:
So neither case is true.
The instant you drag 1 pixel down:
So you fall into the direction = 'next';
and _movePlaceholder() will get called since direction is set and the "Drop Here" appears in the "next" spot(below the last item).
If you drag from the top of the drop area, you would hit the direction = 'prev';
case and the "Drop Here" appears in the "prev" spot(above the first item).
The moveOnDragEnter
variable seems to be an undocumented option that you can set to true on your sortable init to override the offsetDelta check BUT if you set it, it will cause the "Drop Here" to appear immediately upon entering the drop area BUT it will appear on the top of the list if you enter dragging up and it will appear on the bottom of the list if you enter dragging down...which is not what you want.
Whew!
So....no, with the current logic there is no way to be dragging upwards AND get the "Drop Here" to appear on the bottom of the list and it is a limitation of the sortable.
Now, if you like, you could probably edit the source code to add more cases to the logic to check for more condition combinations, i.e:
if (I'm anywhere in the drop area) {
figure out if the cursor position is above the first item or below the last item and set direction accordingly so that _movePlaceholder() will get called
}
...or just accept the limitation.