0

Кто может подсказать, как сделать чтобы:

  1. Чтобы как в вк за пределами блока нельзя было перетаскивать файл (красным на скриншоте)

  2. Как сделать чтобы при перетаскивании на окно появлялось (то что в зеленым на скриншоте)

У меня есть несколько путей решения 2, первое это например отдельно отслеживать перенос на окно:

  $(window).bind('dragenter dragover', function(event){ Тут появления блока в окне});

И второй путь решения, менее удачный, это полностью отслеживать dragover и drop и т.п только на окне, но с помощью event.target выделять определенные действия.

P.S: Больше интересует, как сделать первое, но если предложите лучшие пути решения второго, буду рад. Желательно код на Jquery, но JS тоже воспринимаю.

1
  • @zkolya Нужно, без библеотек 17 апр 2016 в 18:49

2 ответа 2

3

Покопавшись в зарубежных источниках и переведя несколько статей о drag-and-drop, я все же сам решил вопрос.

Все было очень просто, нужно было в dragover после проверки на выход за границу элемента вписать: event.originalEvent.dataTransfer.dropEffect = "none";

Пример:

$('#box_drop').bind('dragenter dragover', function(event) {
    event.preventDefault();

    if($(event.target).parents().filter('#drop_upload_cont').length >= 1) {
        $('#drop_upload').html('Отпустите мышку').show();
    }else{
        $('#drop_upload').html('Тащите файл в поле').show();
        event.originalEvent.dataTransfer.dropEffect = "none";
    }
});
1

Необходимо отслеживать события dragover, dragleave, mouseleave на window или html или body (как лучше сработает), добавить классы в body и в css изменять стили, как необходимо у курсора, блока для перетаскивания и тд.

1
  • У меня, сам блок с рабочей загрузкой drag-and-drop готов, вопрос был в том, что как сделать чтобы перенос в эту зону был вообще не возможен и покапавшись и переведя несколько статей о drag-and-drop я все же сам решил вопрос, все было очень просто event.originalEvent.dataTransfer.dropEffect = "none"; 19 апр 2016 в 19:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.