Распространение событий, наложение и перетаскивание событий - PullRequest
Новая
       2

Распространение событий, наложение и перетаскивание событий

12 голосов
/ 21 января 2012

Я хочу наложить div на область просмотра, когда пользователь перетаскивает файл в окно.

Однако у меня возникли проблемы с распространением события.Когда я устанавливаю оверлей на display: block, кажется, что он запускает событие dragleave, затем еще один dragenter, а затем еще один dragleave, поэтому он всегда находится в состоянии после перетаскивания.Конечно, я вызываю e.stopPropagation() и e.preventDefault() для объекта события, но, похоже, это не имеет значения.

Вывод console.log () при перетаскивании чего-либо в окно: 

dragenter
dragenter
dragleave
dragenter
dragleave

Css.#overlay по умолчанию установлен на display: none, но будет отображаться, если body имеет класс dragenter: 

    body {
        position: absolute;
        height: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
    }

    #overlay {
        position: absolute;        
        height: auto;
        width: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(bg.png) repeat-x top right, url(bg.png) repeat-x bottom left, url(bg.png) repeat-y top right, url(bg.p
ng) repeat-y bottom left;
        display: none;
    }

    body.dragenter #overlay {
        display: block;
    }

Javascript.Добавьте класс dragger в dragenter и удалите его в dragleave: 

$(document).on('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
    console.log('dragenter');
    $(document.body).addClass('dragenter');
});

$(document).on('dragleave', function (e) {
    e.stopPropagation();
    e.preventDefault();
    console.log('dragleave';
    $(document.body).removeClass('dragenter');
});

html: 

<body>
<div id="overlay">...</div>
...    
</body>

Ответы [ 4 ]

6 голосов
/ 23 января 2012

Ваше наложение занимает весь размер документа, когда вы перетаскиваете его, оно заполняет его пространство, и ваша мышь эффективно вынимается из тела и теперь находится над наложением. Это запускает цикл mouseleave / mouseenter. Чтобы добиться того, что вам нужно, вы можете привязать событие к прозрачному наложению с высоким z-индексом по сравнению с видимым наложением, которое имеет более низкий z-индекс. Это сохранит событие в самом высоком элементе.

Пример:

http://jsfiddle.net/scottux/z7yaB/

1 голос
/ 28 августа 2014 
    var dropZone = function() {
        var self = this;
        this.eTimestamp = 0;
        this.showDropZone = function(e) {
            e.stopPropagation();
            e.preventDefault();
            if (self.eTimestamp + 300 < e.timeStamp) {
                $("#coverDropZone").show();
                self.eTimestamp = e.timeStamp;
            }
            return false;
        }
        this.hideDropZone = function(e) {
            e.stopPropagation();
            e.preventDefault();
            if (self.eTimestamp + 300 < e.timeStamp) {
                $("#coverDropZone").hide();
                self.eTimestamp = e.timeStamp;
            }
            return false;
        }
        this.showImage = function(e) {
            e.stopPropagation();
            e.preventDefault();
            console.log(e);
            return false;
        }
        document.addEventListener('dragenter', self.showDropZone, false);
        document.addEventListener('dragleave', self.hideDropZone, false);
        document.addEventListener('drop', self.showImage, false);
    }
1 голос
/ 01 февраля 2012

Благодаря Скотту, это привело меня на правильный путь.

Единственная проблема заключалась в том, что она также закрывала остальную часть страницы, поэтому ни один из элементов или входов не был кликабельным. Мне пришлось скрыть #dragOverlay по умолчанию с « display: none » и отобразить его на этом событии 

// Display an overlay when dragging a file over
$('*:visible').live('dragenter', function(e) {
    e.stopPropagation();
    $('body').addClass('drag-enter');
});
0 голосов
/ 17 апреля 2012

Простое решение вместо использования dragenter использование dragover

DragOver Это событие вызывается при наведении мыши на элемент, когда происходит перетаскивание. В большинстве случаев операция, выполняемая во время прослушивания, будет аналогична событию dragenter.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...