Используя перетаскивание от JavaScript
Safari, Инструментальная панель и основанные на WebKit приложения включают поддержку настройки поведения операций перетаскивания в Ваших страницах HTML.
Введение в перетаскивание JavaScript
Поддержка операций перетаскивания реализована в JavaScript и может быть применена к отдельным элементам Вашей страницы HTML. Для операций перетаскивания элемент может обработать следующие события JavaScript:
ondragstartondragondragend
ondragstart событие инициирует работу перетаскивания. Можно обеспечить, обработчик для этого события, чтобы инициировать или отменить перетаскивают операции выборочно. Для отмены работы перетаскивания вызовите preventDefault метод объекта-события. Для обработки события присвойте значение effectAllowed свойство и помещенный данные для перетаскивания в dataTransfer объект, который можно получить от объекта-события. Посмотрите, что Изменение Перетаскивает Эффекты для получения информации о effectAllowed свойство. Посмотрите Управление Перетащенные Данные для получения информации об обработке данных перетаскивания.
Как только перетаскивание идет полным ходом, ondrag событие запускается постоянно в элемент, чтобы дать ему шанс выполнить любые задачи, которые это хочет к тому, в то время как перетаскивание происходит. После завершения работы элемент получает ondragend событие. Если перетаскивание было успешно, ondrop обработчик для целевого элемента отбрасывания также вызывают (прежде чем ondragend обработчик вызывают).
В то время как перетаскивание происходит, события отправляются в элементы, которые являются потенциальными целями отбрасывания для перетаскиваемого содержания. Те элементы могут обработать следующие события:
ondragenterondragoverondragleaveondrop
ondragenter и ondragleave когда мышь пользователя вводит или оставляет границы элемента, события сообщают элементу. Можно использовать эти события, чтобы изменить курсор или обеспечить обратную связь относительно того, может ли отбрасывание произойти на элементе. ondragover событие отправляется постоянно, в то время как мышь по элементу, чтобы дать ему шанс выполнить любые необходимые задачи. Если разъединения абонентом кнопка мыши, элемент получает ondrop событие, дающее ему шанс включить отброшенное содержание.
Если Вы реализуете обработчики для ondragenter и ondragover события, необходимо вызвать preventDefault метод объекта-события. Этот метод не берет параметров и уведомляет WebKit, что Ваш обработчик будет действовать как получатель любых входящих данных. Если Вы не вызываете этот метод, WebKit получает данные и включает их для Вас. Вы не должны вызывать preventDefault когда события имеют место, если Вы просто хотите быть уведомленными.
Добавление обработчиков к элементам
Можно добавить обработчики для событий перетаскивания к любому элементу в веб-странице. Когда работа перетаскивания или отбрасывания происходит, WebKit ищет надлежащий обработчик на элементе, который является фокусом работы. Если тот элемент не определяет обработчик, WebKit идет по списку родительских элементов, пока это не находит делающий тот. Если никакой элемент не определяет обработчик, WebKit применяет поведение по умолчанию. Для демонстрации этого процесса предположите, что у Вас есть следующий основной HTML в веб-странице:
<body ondragstart="BodyDragHandler()" |
ondragend="BodyDragEndHandler()"> |
<span ondragstart="SpanDragHandler()">Drag this text.</span> |
</body> |
Если пользователь инициирует работу перетаскивания на тексте в span тег, вызовы WebKit SpanDragHandler обработать событие. Когда работа перетаскивания заканчивается, WebKit вызывает BodyDragEndHandler обработать событие.
Создание перемещаемого элемента
WebKit предоставляет автоматическую поддержку, чтобы позволить пользователям перетащить товары широкого потребления, такие как изображения, ссылки и выделенный текст. Можно расширить эту поддержку для включения определенных элементов на странице HTML. Например, Вы могли отметить деталь div или span тегируйте как перемещаемые.
Для маркировки произвольного элемента как перемещаемый добавьте -webkit-user-drag атрибут (ранее -khtml-user-drag) к определению стилей элемента. Поскольку это - атрибут каскадной таблицы стилей (CSS), можно включать его как часть определения стилей или как атрибут встроенного стиля на теге элементов. Значения для этого атрибута перечислены в Таблице 1.
Следующий пример показывает, как Вы могли бы использовать этот атрибут в a span тегируйте для разрешения перетаскивания всего тега. Когда пользователь щелкает span текст, WebKit идентифицирует промежуток, как являющийся перемещаемым, и инициирует работу перетаскивания.
<span style="color:rgb(22,255,22); -webkit-user-drag:element;">draggable text</span> |
Управление перетащенными данными
Когда событие имеет место, Ваш обработчик использует dataTransfer объект, присоединенный к событию, чтобы добраться и установить данные буфера обмена. Этот объект определяет clearData, getData, и setData методы, чтобы позволить Вам очищаться, доберитесь и установите данные по области монтажа перетаскивания.
В отличие от многих других браузеров, типов данных поддержки внедрения перетаскивания WebKit вне тех, которые найдены в документах HTML. Когда Вы вызываете также getData или setData, Вы указываете тип MIME целевых данных. Для типов это распознает, WebKit отображает тип на известный тип области монтажа. Однако можно также указать типы MIME, соответствующие любым пользовательским форматам данных, которые понимает приложение. Для большинства операций перетаскивания Вы, вероятно, захотите работать с простыми типами данных, такими как простой текст или список URIs.
Как приложения, WebKit поддерживает возможность отправить те же данные на область монтажа в многократных форматах. Для добавления другого формата Вы просто вызываете setData метод с различным типом MIME и строкой данных, соответствующих тому типу.
Для получения списка типов, в настоящее время доступных на области монтажа, можно использовать types свойство dataTransfer объект. Это свойство содержит массив строк с типами MIME доступных данных.
Изменение перетаскивает эффекты
При перетаскивании содержания от одного места до другого это не могло бы всегда быть целесообразно перемещать то содержание постоянно к месту назначения. Вы могли бы хотеть скопировать данные или создать ссылку между источником и целевыми документами вместо этого. Для обработки этих ситуаций можно использовать effectAllowed и dropEffect свойства dataTransfer объект указать, как Вы хотите, чтобы были обработаны данные.
effectAllowed свойство говорит WebKit, какие типы работы исходный элемент поддерживает. Вы обычно устанавливали бы это свойство в Вашем ondragstart обработчик событий. Значение для этого свойства является строкой, значение которой может быть одним из перечисленных в Таблице 2.
dropEffect свойство указывает единственную работу, поддерживаемую целью отбрасывания (copy, move, link, или none). Когда элемент получает ondragenter событие, необходимо установить значение этого свойства к одному из тех значений, предпочтительно то, также перечисленное в effectAllowed свойство. Если Вы не указываете значение для этого свойства, WebKit выбирает один на основе доступных операций (как указано в effectAllowed). Операции копии имеют приоритет над операциями пересылки, имеющими приоритет над операциями ссылки.
Когда эти свойства установлены входными и выходными элементами, WebKit выводит на экран обратную связь пользователю о том, какая работа произойдет, если будет отброшен перетащенный элемент. Например, если перетащенный элемент поддерживает все операции, но отбрасывание предназначается только для операций копии поддержек, WebKit выводит на экран обратную связь, указывающую, что работа копии произошла бы.
Изменение появления перетащенных элементов
Во время работы перетаскивания WebKit предоставляет обратную связь пользователю путем отображения изображения перетащенного содержания под мышью. Изображение по умолчанию, используемое WebKit, является снимком перетаскиваемого элемента, но можно изменить это изображение для удовлетворения потребностям.
Изменение снимка с CSS
Самый простой способ изменить появление перетаскивать-изображения состоит в том, чтобы использовать записи каскадной таблицы стилей для перемещаемых элементов. WebKit определяет -webkit-drag (раньше -khtml-drag) псевдокласс, который можно использовать для изменения определений стилей для определенного класса во время работы перетаскивания. Для использования этого псевдокласса создайте новую пустую запись класса таблицы стилей с именем класса, который Вы хотите изменить, сопровождаемый двоеточие и строка -webkit-drag. В определении стилей этого нового класса измените или добавьте атрибуты для указания различий по внешности между исходным элементом и элементом, в то время как это перетаскивается.
Следующий пример показывает определение таблицы стилей для элемента. Во время нормального дисплея появление элемента определяется определением таблицы стилей divSrc4 класс. Когда элемент перетаскивается, WebKit изменяет цвет фона для соответствия цвета, указанного в divSrc4:-webkit-drag псевдокласс.
#divSrc4 { |
display:inline-block; |
margin:6; |
position:relative; |
top:20px; |
width:100px; |
height:50px; |
background-color:rgb(202,232,255); |
} |
#divSrc4:-webkit-drag { |
background-color:rgb(255,255,154) |
} |
Указание пользовательского изображения перетаскивания
Другой способ изменить изображение перетаскивания для элемента состоит в том, чтобы указать пользовательское изображение. Когда работа перетаскивания начинается, можно использовать setDragImage метод dataTransfer объект. Этот метод имеет следующее определение:
function setDragImage(image, x, y) |
image параметр может содержать или Объект изображения JavaScript или другой элемент. Если Вы указываете Объект изображения, использование WebKit, отображающее как изображение перетаскивания для элемента. При указании элемента WebKit берет снимок элемента, который Вы указываете (включая его дочерние элементы) и использование, создающее снимки как изображение перетаскивания вместо этого.
x и y параметры setDragImage укажите точку изображения, которое должно быть помещено непосредственно под мышью. Это значение обычно является расположением щелчка мышью, инициировавшего перетаскивание относительно верхнего левого угла управляемого элемента.
К сожалению, получение этой информации способом перекрестного браузера легче сказать чем сделать. Нет никакого стандартного способа определить позицию мыши относительно документа, потому что различные браузеры реализуют стандартные значения события тонко несовместимыми способами.
В целях Safari и WebKit, clientX и clientY относительный документ, как pageX и pageY (которые таким образом всегда равны clientX и clientY).
Получение позиции элемента под мышью несколько проще. QuirksMode имеет страницу (с примерами кода) на предмете в http://www .quirksmode.org/js/findpos.html.
Полный пример
Никакое описание перетаскивания не было бы завершено без рабочего примера. Сохраните это в файл HTML и откройте его в Safari. Необходимо видеть очень простой набор полей, содержащих слова. При перетаскивании каждого поля слова в синее «целевое» поле поле исчезнет, и слово, будет казаться, в его корректном месте сформирует фразу, “Это - тест”.
<!DOCTYPE html> |
<html> |
<head> |
<title>Drag and Drop</title> |
<script><!-- |
var dragitem = undefined; |
function setdragitem(item, evt) { |
dragitem=item; |
// alert('item: '+item); |
// item is an HTML DIV element. |
// evt is an event. |
// If the item should not be draggable, enable this next line. |
// evt.preventDefault(); |
return true; |
} |
function cleardragitem() { |
dragitem=undefined; |
// alert('item: '+item); |
} |
function dodrag() { |
// alert('item: '+dragitem); |
} |
// This is required---used to tell WebKit that the drag should |
// be allowed. |
function handledragenter(elt, evt) { |
evt.preventDefault(); |
return true; |
} |
function handledragover(elt, evt) { |
evt.preventDefault(); |
return true; |
} |
function handledragleave(elt, evt) { |
} |
function handledrop(elt, evt) { |
// alert('drop'); |
dragitem.style.display="none"; |
var newid=dragitem.id + '_dest'; |
var dest = document.getElementById(newid); |
dest.innerHTML = dragitem.innerHTML; |
} |
// --></script> |
<style><!-- |
.wordbox { border: 1px solid black; text-align: center; width: 50px; float: left; -webkit-user-drag: element; -webkit-user-select: none; } |
.spacer { clear: both; } |
.target { margin-top: 30px; padding: 30px; width: 70px; border: 1px solid black; background: #c0c0ff; margin-bottom: 30px; -webkit-user-drop: element; } |
.word { margin: 30px; min-height: 30px; border-bottom: 1px solid black; width: 50px; float: left; } |
--></style> |
</head> |
<body> |
<p>Drop words onto target area to put them in their places.</p> |
<div class='wordbox' id='this' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>This</div> |
<div class='wordbox' id='is' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>is</div> |
<div class='wordbox' id='a' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>a</div> |
<div class='wordbox' id='test' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>test</div> |
<div class='spacer'></div> |
<div class='target' ondragenter='handledragenter(this, event);' ondragover='handledragover(this, event);' ondragleave='handledragleave(this, event);' ondrop='handledrop(this, event);'>TARGET</div> |
<div class='words'> |
<div class='word' id='this_dest'></div> |
<div class='word' id='is_dest'></div> |
<div class='word' id='a_dest'></div> |
<div class='word' id='test_dest'></div> |
</div> |
</body> |
</html> |