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 that you have read and understand our privacy policy and code of conduct.

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