html5 drag/drop e.stopPropagation();

У меня возникла проблема, что вызывается окно с содержимым файла, хотя вызывается e.stopPropagation(). Когда я перетаскиваю файл с рабочего стола в div в свой браузер, моя текущая вкладка перезагружается новым контентом (изображениями, текстом). В качестве браузера я использую Chrome, но я также попробовал его с Safari и Firefox! я просто не понимаю, вот мой код:html5 drag/drop e.stopPropagation();

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>File Uploader</title> 
    <link href="../styles/allgemein.css" rel="stylesheet" type="text/css"/> 
    <link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">//--> 
    <!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">//--> 
    <!--<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>//--> 
</head> 

<body style="position:relative;"> 
<script> 
    var dropZone = document.getElementById('drag_upload'); 
    dropZone.addEventListener('drop', handleDrop, false); 
</script> 
<script> 
    $(document).ready(function() { 
     $("#home").button(); 
     $("#frm_logout").button(); 
    }); 

    function handleDrop(e) { 
     e.stopPropagation(); // Stops some browsers from redirecting. 
     e.preventDefault(); 

     var files = e.dataTransfer.files; 
     for (var i = 0, f; f = files[i]; i++) { 
      alert(files[i]); 
     } 
    } 
</script> 
<div style="width:100%; text-align:center; font-family: Arial; font-size:28px;"><b>Cloudservice</b></div> 
<form action="../" method="post"> 
    <input type="submit" name="logout" value="Logout" id="frm_logout" style="z-index: 1000; float:right;"/> 
</form> 
<a href="../"><input type="button" value="Home" id="home"/></a> 

<div style="width:100%; font-size:18px; text-align:left; font-family:Arial; position:absolute; left:5px; top:100px;"> 
    <?php echo "User: " . $user . "<br/>Maximum <br/>upload size: " . $size . " MB<br/><br/>"; ?> 
    <a href="fileupload"> 
     <div 
      style="width: 125px; height: 40px; background-color: #003366; text-align: center; font-family: Arial; border-radius: 10px; color:#CCC;"> 
      <div style="top: 10px; position: relative;">Fileupload</div> 
     </div> 
    </a><br/> 

    <div style="width: 250px; height: 435px; border: 2px solid #003366; border-radius: 15px;"> 
     <div style="position: relative; top:200px; text-align: center;" id="drag_upload">Drop File here to upload!</div> 
    </div> 
</div> 
</body> 
</html>

источник

2013-12-03 user3061909

Я ответил, что понял, что вы уже делаете то, что я предлагал. Я перечитаю код, но e.stopPropagation() не позволяет родительским элементам получать событие. e.preventDefault() - это то, что предотвращает по умолчанию загрузку файла. Возможно, e выходит за рамки? – MaKR

hm, теперь я получил его;) также нужно обработать перетаскивание! – user3061909

Удаляется Ответ:

Вы должны будете использовать e.preventDefault() в сочетании с e.stopPropogation(), как поведение по умолчанию для загрузки файла на текущей вкладке.

Почему не так, что у вас есть preventDefault, но также возможно, что событие выходит за рамки. e.stopPropogation() будет препятствовать тому, чтобы событие продвигалось выше дерева DOM к родительским элементам. Вот некоторые очистки кода, который протестирован хорошо для меня:

$(document).ready(function() { 
    $("#home").button(); 
    $("#frm_logout").button(); 
}); 

$('body').on('dragover drop', function(e) { e.preventDefault(); }); 
$(document).on('draginit dragstart dragover dragend drag drop', function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
}); 

$("#drag_upload").on('dragover', function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    $(this).addClass('dragHover'); 
}).on('dragleave dragend', function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    $(this).removeClass('dragHover'); 
}).on('drop', function(e) { 
    e.stopPropagation(); // Stops parent elements from receiving event. 
    e.preventDefault();  // Stops some browsers from redirecting. 
    $(this).removeClass('dragHover'); 
    $(this).addClass('loading'); 

    if (window.FileReader) { 
     if (e.originalEvent.dataTransfer.files.length<1) { 
      // do stuff here 
     } 
    } 
    else alert('Internet Explorer 9 and below are not supported for this feature.'); 
});

Я удалил </script><script>, как вы можете просто продолжить предыдущий.

Я использовал e.preventDefault() непосредственно на обоих тело & документа, чтобы убедиться, что не собирается перенаправить браузер, хотя использование как e.preventDefault() и e.stopPropogation() в случае должен сделать это, я предпочел бы быть в безопасности, чем Прости.

Я сделал функции встроенные, используя JQuery's .on(), который оказался самым надежным способом для меня связывания событий.

Я также добавил несколько классов, которые установлены/не установлены во время событий, на самом деле просто копировать/вставлять остатки из кода, который я использую, но они полезны для стилизации элементов при возникновении событий. Оставьте их или удалите, это больше для пользователя, чем для вас.

Далее, вы хотите, чтобы убедиться, что браузер способен window.FileReader, поскольку нет никакой поддержки IE ниже версий 10.

Последней, e.dataTransfer.files не существует. Вам понадобится e.originalEvent.dataTransfer.files (хотя, как вы его написали, я не уверен, что именно так из-за сферы действия в разных методах).

источник

2013-12-03 17:22:09 MaKR

html5 drag/drop e.stopPropagation();

ответ

Смежные вопросы