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?
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
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.
Please login first to submit.