How to determine exact position on drag with i-insert-middle

1 Answer 18 Views
TreeView
Rob
Top achievements
Rank 1
Veteran
Rob asked on 17 Jun 2021, 02:41 AM

Hi guys

I have a treeview which has some rules about the exact location that certain nodes can be dragged to.

I have been working through the logic and getting there, except I cam across this challenge

If I have 3 nodes and the same level and drag a new node between them

Node1

   drag position a

Node2

drag position b

Node3

It appears that if the mouse is closets to Node2  at both drag position A and B, I can get the same drag events.

To be clear, dropTarget = 'Node2' and status is  'i-insert-middle' can happen at both Drag A and Drag B  if the mouse is closest to Node2.

I think easiest demonstrated in this simple Dojo  I have filtered out all events other than target for the second node and insert middle events.

drag and drop drag events

Dragging on each side of the second node can give the same drag events  as per attached screen shots which show the same events for the different locations. of the drag

How can I determine where the exact location the user is dragging to? ( before they do it , so I can deny or allow)

Many thanks

Rob

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 21 Jun 2021, 11:45 AM

Hi Rob,

If it is suitable for your scenario you could check the element before or after the drop hint. Below is an example:

 if($('.k-drop-hint').next().text() === "second"){
       console.log('Drop hint is before "Second" ')
}

Here is the modified Dojo example.

You could also take a look at the dragend and drop events as they could be also used to prevent dropping an element over specific target.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Rob
Top achievements
Rank 1
Veteran
commented on 23 Jun 2021, 11:31 PM

Sadly this does not work on my actual solution. The 'text' is always blank
Perhaps because I am using the MVC widgets and or a remote data source.?

I had started with the drop and dragend events , but I wanted a nicer user experience than letting the user drop and then find out that was not accepted.

But I have spent too much time on this now, and I will go back to the dragend event and add a notification to explain why the drop failed.

Thanks for trying to help.
Martin
Telerik team
commented on 28 Jun 2021, 12:06 PM

Could you please try this version of the code snippet? That worked for me in an MVC scenario with remote data binding.

function onDrag(e) {
        if (e.statusClass == 'i-insert-middle' && e.dropTarget.innerText == 'Text 4') {
            var div = document.getElementById('dragevents');

            if ($('.k-drop-hint').prev().text() === "second") { // prev() instead of next()
                console.log('Drop hint is before "second" ')
            }
            if (e.drop)
                div.innerHTML += "position " + e.statusClass + " on target " + e.dropTarget.innerText + "<br>";
            //console.log("position "  + e.statusClass + " on target " +e.dropTarget.innerText);
        }
    }

Tags
TreeView
Asked by
Rob
Top achievements
Rank 1
Veteran
Answers by
Neli
Telerik team
Share this question
or