GWT 2.4 HTML 5 drag and drop APIS - изменение курсора при перетаскивании

Я использую GWT 2.4 Drag and Drop API для перетаскивания элементов для передачи данных между виджетами. Реализация перетаскивания была простой, но у меня проблемы с изменением курсора при перетаскивании элемента. Я провел небольшое исследование и нашел несколько статей о том, как мне этого добиться.

В этой статье http://blog.vjeux.com/2012/css/css-cross-browser-drag-cursor.html предполагается, что это можно сделать, установив в свойстве курсора любое приемлемое значение, которое мы бы хотели. Я пробовал (cursor: -webkit-drag; или cursor: move;) на элементе, который нужно перетащить, или элементе, на который элемент можно перетащить, но добавил только небольшое изображение в нижнем правом углу значка курсора.

Взглянув на этот http://www.html5rocks.com/en/tutorials/dnd/basics/, говорят, что курсор (эффект) можно изменить при перетаскивании, установив effectAllowed и dropEffect из объекта dataTransfer. Несмотря на то, что GWT Drag and Drop API не предоставляет ни одно из этих свойств, я могу установить их через JSNI, но эффект был таким же, как и раньше (с CSS).

Я нашел эти вопросы HTML5 Drag & Drop Изменить значок / курсор при перетаскивании и Изменение курсора мыши для файлов перетаскивания HTML5 (GMail Drag Drop) по той же теме, но ни один из них не помог изменить или заменить значок во время перетаскивания.

Любая помощь приветствуется.

Тестовая среда:

Ubuntu 12.04.1 Chrome 22

Ура,

1 ответ

Я думаю, что самый простой способ - это использовать:

RootPanel.getBodyElement().getStyle().setCursor(Cursor.MOVE);

всякий раз, когда вы начинаете двигаться и:

RootPanel.getBodyElement().getStyle().setCursor(Cursor.DEFAULT);

всякий раз, когда вы сделали.

Также вы можете установить CSS-свойство:

cursor: whatever;

на любой элемент, который вы хотите. Вы обычно используете это так:

div.over-this-div-the-cursor-becomes-different:hover {
    cursor: move;
}

см.: http://www.w3schools.com/cssref/pr_class_cursor.asp

Другие вопросы по тегам