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

[Rob]

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

[Neli]

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

[Rob]

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]

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);
        }
    }