Как получить упакованные данные как HTML из DropEvent?

Question

Я пытаюсь создать contenteditable, у которого есть чип-элементы внутри него, которые должны быть перетащить & dropable. Вы можете взглянуть на эту плохо работающую вещь на my github repo.

История о том, как я доработал до сих пор, - это еще один, и после борьбы за дней теперь я наконец смог найти решение, которое, кажется, работает, скажем, 90% всех случаев.

Одной из нерешенных проблем, хотя в том, что можно выбрать текст и перетащить & падение его внутри этой области текста:

Выбор здесь будет что-то вроде «lling <div class="chip">Red Screwdriver</div> an». Чтобы отключить это, я вижу два варианта:

Отключить выбор текста вообще - чего я не смог добиться до сих пор - или взглянуть на событие перетаскивания и проверить содержимое перетаскиваемого HTML. Моя проблема в том, что я не знаю, как я могу это получить. Так как я только хочу, чтобы один единственный элемент является сопротивление & упал в то время, я мог сравнить «lling <div class="chip">Red Screwdriver</div> an» на мой перетащили элемент:

String draggedHtmlDataAsString = event.getDraggedHtmlDataAsString(); 

if(this.draggedElement.getHtml().equals(draggedHtmlDataAsString) == false) { 
    // Don't accept data 
} else { 
    // Accept data 
} 

, но я не знаю, как я могу получить эти данные из события. Чистое решение GWT/Java так же хорошо, как решение JavaScrit/JSNI для меня.

Любые предложения, которые были бы намного лучше, чем это приветствуются.

Я также попытался запретить выбор, но смотрите сами ..

Answer 1

EDIT:

Чтобы предотвратить выделение, добавить этот класс CSS для вашего виджета:

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

Вместо отображения текста в виде текста вы можете разбить его на отдельные токены, каждый из которых представлен виджлетом InlineLabel (или элементом «span»).

Например, вы будете иметь эти маркеры:

• мы продаем
• Синий Отвертка
• и
• Красный Отвертка

Вы добавляете каждый InlineLabel в контейнер, настройка «contenteditable» для всех виджетов, но «перетаскиваемая» только на тех, которые вы разрешаете перетаскивать.

Если вам нужна возможность отбрасывать новые фишки между любыми словами, то каждый токен должен представлять только одно слово. Вы также можете предотвратить падение фишек внутри слова - и разрешить падение только в промежутках между токенами.