25.09.2012, 17:03
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Симуляция drag'n'drop (html5)
Любой элемент можно сделать перетаскиваемым добавив атрибут draggable="true" и управлять процессом перетаскивания через обработчики событий. Вопрос - можно ли как-то инициировать процесс drag'n'drop, если мы не имеем конкретного элемента и имеется собственный обработчик mousedown. То есть реально ли запустить процесс drag'n'drop не имея перетаскиваемого объекта?
Необходимо в реализовать в текстовом редакторе. В нем выделенный текст не представляет из себя отдельный dom-элемент, да и вообще, лежит под другими слоями и не ловит никаких событий.
Пока писал, возникла идея запуска mousedown + mousemove событий на отдельно-выделенном элементе, но вот сомневаюсь что таким образом отработает дефолтное поведение (начало перетаскивания).
|
|
26.09.2012, 02:54
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
danik.js, что мешает обернуть выделенный текст в, например, span?
|
|
26.09.2012, 11:29
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Мешает реализация редактора. Там используется особая схема "прорисовки" строк, и каждая строка - это отдельный dom-элемент.
Кажется в спецификации явно говорится, что браузер не должен допускать симуляцию drag'n'drop.
Я пришел к одной идее - покрыть текст слоем с атрибутом draggable.
В обычных условиях клик по контейнеру будет перехватываться и preventDefault'иться и перетаскивания не будет происходить. А когда нужно будет перетащить текст, клик будет освобожден, и запустится перетаскивание этого слоя. А там уже по dragstart можно установить нужные данные (перетаскиваемый кусок текста) и словить событие drop
Маленькое неудобство - не будет видно призрачного текста при перетаскивании. Но это и не нужно особо.
Вот думаю что если попробовать отрисовать текст в canvas-е и установить через e.dataTransfer.setDragImage() , но в параметре должен быть Image а не Canvas. Можно ли из Canvas создать Image ?
|
|
26.09.2012, 19:34
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
danik.js, вы какой-то редкостный извращенец. Нет, серьёзно.
Есть замечательное событие "selectionchange" на которое вешаешь обработчик. Выделенный текст оборачиваешь в спан, которому draggable ставишь в true. Бинго.
|
|
29.09.2012, 18:30
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Сообщение от trikadin
|
danik.js, вы какой-то редкостный извращенец. Нет, серьёзно.
|
А-ха ))
Ну да, я не один такой. Вот, тогда гляньте на результат работы извращенных умов: http://ace.ajax.org/
Думаете там будет такое событие ? )
|
|
30.09.2012, 01:25
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
danik.js, с этого надо было начинать. Судя по тому, что я увидел, у них там есть какой-то свой драг'н'дроп текста (уж не знаю, чем не угодил стандартный). Советую покопаться в коде и найти, возможно, вы сможете отловить или как-то подключиться к их собственному событию.
А ещё можно ловить mousemove на document. Не уверен, что вам это поможет, но на всякий случай сообщаю о такой возможности)
|
|
30.09.2012, 22:29
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
В ie9 (и вроде 8) есть возможность запуска drap'n'drop - у элементов есть функция dragDrop(). Более того, без ее ручного запуска не работает перетаскивание элементов, неперетаскиваемых по умолчанию(тоесть всех кроме ссылок, картинок, выделенного текста и т.д.)
К тому же в ie9 какие то глюки с dropEffect - я не могу его динамически менять по событию dragover (в зависимости от ctrl), причем в ie8 такого глюка нет.
|
|
|
|