получить падение после перетаскивания в html5

Я зарегистрирован в событиях HTML5 DnD, чтобы получать файлы перетаскивания с рабочего стола. Проблема, которую я вижу, заключается в том, что я всегда получаю событие dragleave непосредственно перед событием drop. В спецификации нет упоминания о чем-то подобном, и если вы используете тягу в качестве индикатора того, что падения не произошло, это испортит логику.

var dropbox = document.getElementById("dropzone");
dropbox.addEventListener("dragenter", dragEnter, false);
dropbox.addEventListener("dragleave", dragLeave, false);
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, false);

function dragEnter(e){
    console.log("dragEnter ",e);
    dropbox.style.backgroundColor = "red";
    e.stopPropagation();
    e.preventDefault();
}

function dragLeave(e){
    console.log("dragleave");
    dropbox.style.backgroundColor = "white";
    e.stopPropagation();
    e.preventDefault();
}

function dragOver(e){
    console.log("dragOver ",e);
    e.stopPropagation();
    e.preventDefault();
}

function drop(e){
     console.log("drop ",e);
     var files = e.dataTransfer.files;
     var count = files.length;
     e.stopPropagation();
     e.preventDefault();
}

это работает как дизайн или я что-то упустил?


javascript html drag-and-drop
person Amir    schedule 21.01.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это кажется хорошей ссылкой: http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

По сути, dragLeave не является показателем того, что падения не произошло. Это индикатор того, что перетаскиваемый объект был перетащен из другого объекта.
Он вам не нужен.

[Редактировать: По сути, dragleave срабатывает, потому что элемент, который вы перетаскиваете, находится на вашем рабочем столе. object, в котором он находится до того, как вы его уроните, — это, по сути, ваш рабочий стол. Если вы перетащите любой файл со своего рабочего стола на любую цель перетаскивания, он сработает dragleave, чтобы указать, что он больше не находится «в» предыдущем объекте (вашем рабочем столе), а теперь находится в новом объекте («зоне перетаскивания»). Если у вас было несколько дропзон, то каждый раз, когда вы перетаскивали его, из одной из них срабатывал dragleave. Вы должны просто использовать событие drop, чтобы узнать, произошло ли падение.]

person Gerrat    schedule 22.01.2011
comment
Но мне это нужно, и если бы это не добавило никакой ценности, я думаю, они бы этого не добавили. Мне нужно, чтобы он знал, что объект был перетащен из зоны перетаскивания, это то, что должно делать это событие. но по какой-то причине он срабатывает, даже если пользователь бросает объект в зону перетаскивания - так что для меня это звучит как ошибка, если только я не прочитал руководство неправильно. - person Amir; 24.01.2011
comment
@Amir: Причина, по которой я сказал, что вам это не нужно, заключается в том, что вы сказали: если вы используете перетаскивание в качестве индикатора того, что падения не произошло .... Как я уже сказал, это не означает, что падения не произошло. Вы, конечно, можете использовать его как индикатор того, что перетаскиваемый объект был перетащен из другого объекта... но, как я уже сказал, это не означает, что падения не произошло. - person Gerrat; 24.01.2011

arrow_upward
1
arrow_downward

Событие dragleave на самом деле не делает того, что подразумевает. Это произойдет только после того, как вы переместите перетаскиваемый объект над зоной сброса, а затем переместите его, не опуская, что перетаскивание срабатывает. Он не был реализован для обнаружения ранее сброшенного предмета, перетаскиваемого из зоны сброса. Это просто часть цепочки событий, находящаяся где-то между драгстартом и дрэгендом. Согласно спецификации, это происходит, если «операция перетаскивания не удалась». (У Firefox, по-видимому, есть известная проблема, заключающаяся в том, что событие dragleave вызывается, даже если удаление прошло успешно).

http://www.w3.org/html/wg/drafts/html/master/editing.html#drag-and-drop-processing-model

Так что вы оба частично правы. «Это индикатор того, что перетаскиваемый объект был вытащен из другого объекта». верно, если этот перетаскиваемый объект не был предварительно удален. Кроме того, для определения того, что сброса не произошло, допустимо использование события dragleave.

Если вы пытаетесь узнать, что после того, как перетаскиваемый объект был удален, он был удален из зоны сброса (т. е. пользователь положил что-то в корзину, а затем решил, что хочет перетащить его позже), вы будете в основном отменяет предыдущие события перетаскивания... т. е. ваш контейнер с перетаскиваемыми элементами теперь станет зоной перетаскивания, а ваша исходная зона перетаскивания будет содержать перетаскиваемые элементы или, как вы решите, на основе вашей настройки.

РЕДАКТИРОВАТЬ: Философское рассуждение... Если вы можете предположить, что не все Zinks являются Zorks, то вы можете предположить, что не все приложения, которые реализуют функцию перетаскивания, захотят позволить пользователю, который что-то куда-то уронил, удалить этот удаленный элемент позже. Таким образом, использование перетаскивания в определенных сценариях повлечет за собой накладные расходы браузера на память, чтобы поддерживать состояние того, какие элементы были ранее удалены в любое время. (Представьте себе головоломку, в которой нет понятия «состояние»).

person jenjenut233    schedule 06.03.2011