This is a migrated thread and some comments may be shown as answers.

Drag/Drop between ListBox and Treeview

2 Answers 348 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Colin
Top achievements
Rank 1
Colin asked on 09 Mar 2021, 04:59 PM

Hi all,

I'm just starting out with my trial, so am very much a beginner, hope this isn't a daft question.

I'd like to be able to drag items from a TreeView into some ListBoxes and back out again. The idea is that drag onto list box adds the item to that list, drag from listbox to the treeview will remove the item from the list.

I have got TreeView -> ListBox working by catching the TreeView.onDragEnd event and using document.elementFromPoint() to work out where the item is being dropped. (Perhaps there is a better way to do this too?)

I can't figure out how to detect the drop of a ListBox item outside of the ListBoxes though. There is an onDrop event but it only fires if dropping on a ListBox. If I drag anywhere outside the ListBox I get the "can not drop here" mouse icon".

Is there a way to achieve this?

Thanks for any help!

Colin

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 10 Mar 2021, 06:14 AM

Hello, Colin,

The approach is correct.

For the drop from the ListVist to the TreeView, we can suggest adding a div wrapper around the TreeView and attach an onDrop event over the div.

Then we can use the same approach to know where the user has dropped the item.

Please let me know if there are any issues using this approach.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Colin
Top achievements
Rank 1
answered on 10 Mar 2021, 10:51 AM
Obvious once you point it out, thanks.
Tags
General Discussions
Asked by
Colin
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Colin
Top achievements
Rank 1
Share this question
or