JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

// за границы совпадает с количеством входов, следует снять подсветку списка entered--;

if ((to && !ischild(to,list)) || entered <= 0) {

list.className = original_class;

entered = 0;

}

return false;

}

//

Этот обработчик вызывается, когда происходит сброс объекта.

// Он извлекает сброшенный текст и превращает его в новый элемент <li>

list.ondrop = function(e) {

е = е И window.event; // Получить объект события

// Получить сброшенные данные в текстовом формате.

// "Text" - это псевдоним для "text/plain".

// IE не поддерживает "text/plain”, поэтому здесь используется "Text".

var dt = e.dataTransfer; // объект dataTransfer

var text = dt.getData("Text"); // Получить данные в текстовом формате.

// Если был получен некоторый текст, превратить его в новый элемент

// списка и добавить в конец,

if (text) {

var item = document.createElement("li"); // Создать новый <li>

item.draggable = true; // Сделать буксируемым

item.appendChild(document.createTextNode(text)); // Добавить текст

list.appendChild(item); // Добавить в список

// Восстановить первоначальный стиль списка и сбросить счетчик entered

list.className = original_class;

entered = 0;

return false;

}

};

// Сделать все элементы списка буксируемыми

var items = list.getElementsByTagName("li");

for(var і = 0; і < items.length; i++) items[i].draggable = true;

//

И зарегистрировать обработчики для поддержки буксировки элементов списка.

// Обратите внимание, что мы поместили эти обработчики в список и ожидаем,

// что события будут всплывать вверх от элементов списка.

// Этот обработчик вызывается, когда буксировка начинается внутри списка,

list.ondragstart = function(e) {

var е = е || window.event;

var target = e.target || e.srcElement;

// Если всплыло событие от элемента, отличного от <li>, игнорировать его

if (target.tagName !== "li") return false;

// Получить важный объект dataTransfer

var dt = e.dataTransfer;

// Сохранить данные и указать информацию об их формате

dt.setData("Text", target.innerText || target.textContent);

// Сообщить, что поддерживаются операции копирования и перемещения

dt.effectAllowed = "copyMove";

};

// Этот обработчик вызывается после успешного сброса

list.ondragend = function(e) {

е = е || window.event;

var target = e.target || e.srcElement;

// Если выполнялась операция перемещения, удалить элемент списка.

// В IE8 это свойство будет иметь значение "none", если явно

// не установить его в значение "move" в обработчике ondrop выше.

// Но принудительная установка в значение "move" для IE будет

// препятствовать другим броузерам дать пользователю возможность

// выбирать между операцияим перемещения и копирования,

if (e.dataTransfer.dropEffect === "move") target.parentNode.removeChild(target);