Strange drag and drop behaviour

0
0

Hi,

I’m having some strange behaviour with drag and drop between list boxes and the CKEditor control.

In the attached app, there is a CKEditor control and two list boxes.  The list box at the top has some URL/link items and the list box at the bottom contains text only items.

What I’m finding is that if I drag the URL items from the first list box and drop onto the CKEditor control, everything works as expected.  The cursor moves as the mouse is positioned to the drop point and the drag cursor is changed to reflect the item that is being dropped.

But, if I try doing the same action with the text only items (bottom list box), I get a totally different result.  In fact, the mouse cursor doesn’t appear to respond immediately as it’s positioned over the CKEditor control and if I drag an item over the toolbar or status bar area in the CKEditor control, only then will the mouse cursor ‘catch up’, but still won’t allow a drop action to take place.

Am I missing something obvious here or is this by design?

General
Share
  • You must to post comments
Filter
Sort by: Newest First
0
0

Hi All,

Just a quick update for anyone else trying to solve how to drag and drop text into CKEditor.

In the attached app there’s a CKEditor, a ListBox and a HTMLPanel control inside a form. For the ListBox, there’s several names added to the list box as URLs. These names can be dragged directly from the ListBox and dropped into the CKEditor control with positional control on where the drop will occur. Since they are URLs that are being dropped then CKEditor will display them as URLs.

The HTMLPanel displays multiple text items which are actually HTML input boxes (https://www.w3schools.com/tags/tag_input.asp) with some Javascript added to each input box to simulate the selecting of the item. Each input box item is constructed in the code and added to a string builder. The contents of the string builder is then used to populate the HTMLPanel.Html property which displays each text item, giving the effect of a list of text items. The user can then drag and drop each text element from the HTMLPanel into CKEditor with positional control, just like the ListBox control that was showing the URLs.

The good thing about this is you don’t have to wire up any drag and drop events, it all gets handled automatically in the browser.

Attachment
WebApplication15.zip
  • You must to post comments
0
0

Hi Andrew,

thanks for your question and sample. In general it´s not enough to simply AllowDrag and AllowDrop to make Drag´n´Drop work.
You need to handle several events, that Luca has described here: https://wisej.com/support/question/listview-details-drag-drop

Please let me know if you need a working sample for dropping from a listbox and copying to the CKEditor.

Best regards
Frank

 

  • Andrew Hills
    Hi Frank, Thanks for that. I had a read through that one and it all made sense, but if you are dragging an item from a list box into another list box or list view, then the drop point on the target can be anywhere, then it’s just the matter of processing the drop event like Luca mentioned. With the CKEditor control it’s a bit different because it doesn’t appear to have that positional control on where text is dropped. In desktop development, you could get the mouse drop position inside a text box or rich text box using GetCharIndexFromPosition, then when the drop is performed, the text that’s being dropped will be dropped at the correct point. I’ve used that technique in the past for creating templates where you have the rich text box on one side and a list of fields that can be dragged into the rich text box and dropped at the mouse position. In that example I sent, using that top list box and dragging into CKEditor is exactly what I’m after, but just without the text having to be added as a URL. There must be some sort of built in function in browsers that allow you to drag a URL, which is why it just works without any code. If you have some code that shows how to drag text from one control and drop into CKEditor at the mouse drop position then yes, I would be interested to see that. Thank you
  • Andrew Hills
    Scratch that… I think i’ve figured it out. Ended up creating elements with the text values and added a bit of JS in there to select the entire text value onclick. That allows me to drag the text item from the listbox into CKEditor and drop it at the mouse position and it didn’t require any drag/drop code either, just setting the allow drag/allow drop properties.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.