javascript - How to get dropped data as HTML from a DropEvent? -

i trying create contenteditable has chip-elements inside should drag & dropable. can take of poorly working thing on my github repo.

the story of how got things working far , after struggling days able come solution seems work in let's 90% of cases.

one remaining problem though is possible select text , drag & drop inside text area:

the selection here "lling <div class="chip">red screwdriver</div> an". in order disallow see 2 options:

either disallow text selection @ - not succeed far - or take @ drop event , check dragged html content. problem don't know how can that. since want allow 1 single element being drag & dropped @ time, compare "lling <div class="chip">red screwdriver</div> an" dragged element:

string draggedhtmldataasstring = event.getdraggedhtmldataasstring();  if(this.draggedelement.gethtml().equals(draggedhtmldataasstring) == false) {     // don't accept data } else {     // accept data } 

but don't know how can data drop event. pure gwt/java solution javascrit/jsni solution me.

any suggestions better welcome.

i tried disallow selection but, see ..

edit:

to prevent selection, add css class widget:

.noselect {   -webkit-touch-callout: none;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; } 

instead of displaying text text, can break down individual tokens, each represented inlinelabel widget (or "span" element).

for example, have these tokens:

• we selling
• blue screwdriver
• and
• red screwdriver

you add each inlinelabel container, setting "contenteditable" on widgets "draggable" on allow drag.

if need ability drop new chips between words, each token should represent 1 word only. may prevent chips being dropped inside word - , allow drops in spaces between tokens.