Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Drug n Drop на форму (https://javascript.ru/forum/jquery/35155-drug-n-drop-na-formu.html)

krasovsky 01.02.2013 09:30

Drug n Drop на форму
 
Господа, буду признателен если кто нибудь просветит меня на предмет эвентов сабжа и их свойств.

Ситуация такая : есть поле в которое надо бросить файлы с определенными расширениями, а прочите за борт. Здесь все просто, нужные файлы отсортировываются, предупреждение о несоответствии всплывает когда файл бросается.
Но задача в том чтобы до того как элемент бросили, он бы вошел на поле для дропа и проверил расширение файла который тащит курсор и соответствено курсор сменился на знак условно "запрещающий дроп"

Подскажите,куда копать,может решение есть готовое или мысли какие?

ksa 01.02.2013 09:37

Цитата:

Сообщение от krasovsky
Подскажите,куда копать,может решение есть готовое или мысли какие?

Т.е. ты серьёзно считаешь что твоего пространного описания вполне достаточно для каких-то советов? :)

Хоть бы тестовый пример какой сделал...

danik.js 01.02.2013 10:12

<marquee>Я принимаю только image/jpeg <img src="http://javascript.ru/forum/images/smilies/wink.gif" /></marquee>
<script>
document.addEventListener('dragover', function(e) {
    var dataTransfer = e.dataTransfer;
    var accept = Array.prototype.some.call(dataTransfer.items, function(item){
        return item.kind == 'file' && item.type == 'image/jpeg';
    });
    dataTransfer.dropEffect = accept ? 'copy' : 'none';
    e.preventDefault();
});
</script>

krasovsky 01.02.2013 11:37

Ну вот человеку вполне хватило!) За что ему огромное спасибо!

ksa 01.02.2013 11:45

Цитата:

Сообщение от krasovsky
Ну вот человеку вполне хватило!)

У него бубен новый... :D

krasovsky 01.02.2013 14:29

var t = this;
                    t.addEventListener('dragover',function(e){
                        var data = e.dataTransfer;
                        console.log(data.items);
                        if (data.items.length > 1) {
                            data.dropEffect = 'none';
                        }
                        else if (data.items.type == 'image/jpeg') {
                            data.dropEffect = 'copy';
                        }
                        else {
                            data.dropEffect = 'none';
                        }

                    })


Вот что у меня получилося. Но не работает главное - выборка по расширению, неврубаюсь почему :-E

danik.js 01.02.2013 20:24

Потому что обработчик dragover не имеет доступа ни к содержимому файлов (боже упаси!), ни к их именам.

Если хотите принимать только файлы, делайте еще проверку item.kind == 'file'.
И разве свойство items.type определено? Может items[0].type ?

krasovsky 02.02.2013 21:10

Цитата:

Сообщение от danik.js (Сообщение 230977)
Потому что обработчик dragover не имеет доступа ни к содержимому файлов (боже упаси!), ни к их именам.

Если хотите принимать только файлы, делайте еще проверку item.kind == 'file'.
И разве свойство items.type определено? Может items[0].type ?

Спасибо что просвятили! Я так понимаю,ни dragover ни другие подобные обработчики (html 5 ) доступа именам объектов не имеют?

danik.js 02.02.2013 21:28

http://dev.w3.org/html5/spec-preview/dnd.html#dndevents

Вот тут в табличке видно что доступ к объектам есть только на ondrop. Во всех остальных случаях - Protected Mode. Оно и понятно: пользователь ведь может только "мимо проносить" файл, поэтому доступ появляется только когда он уже бросил его.

krasovsky 03.02.2013 10:48

Цитата:

Сообщение от danik.js (Сообщение 231116)
http://dev.w3.org/html5/spec-preview/dnd.html#dndevents

Вот тут в табличке видно что доступ к объектам есть только на ondrop. Во всех остальных случаях - Protected Mode. Оно и понятно: пользователь ведь может только "мимо проносить" файл, поэтому доступ появляется только когда он уже бросил его.

Спасибо в который раз. Буду учить англицкий чтоб лишний раз не спрашивать.
Поставил бы вам еще плюс, но ограничения форума не позволяют

В любом случае я dataTransfer я разобрался.


Часовой пояс GMT +3, время: 03:32.