タイル表示機能を利用中にWebページ上のドラッグ&ドロップ操作が無効になる



  • ・現象
    下記の手順でタイル表示を利用すると、Webページ上のドラッグ&ドロップ操作をJavaScriptで検知できなくなり、意図した操作を行えなくなります。
    通常、HTML要素やローカルファイルをWebページ上にドラッグした場合にdragoverイベントが、ドロップした場合にdropイベントが発生しますが、これらのイベントが発生しない状態になります。

    ・手順

    1. タブスタック機能を利用する または タブをCtrl+クリックで複数選択する
    2. 右クリックし、Tile 2 tabsを選ぶ または ステータスバーのアイコンから上下に並べて表示などを選ぶ

    ・補足
    2通り*2通り=4通りの操作でタイル表示を試しましたが、いずれの場合も同じ現象が発生します。
    Vivaldiのバージョン: 1.7.735.46 (Stable channel) (64 ビット)
    OSのバージョン: Windows 10 Pro 64bit バージョン1607(ビルド 14393.953)


  • Moderator

    @darq

    • 1.8.770.44 snapshot 64bit
    • Gentoo Linux

    でタイル表示時にドラッグ&ドロップのイベントが拾われていなさそうであることを確認しました。

    また、報告されていないバグのようです。

    この現象についてテストするのに分かりやすいサイトや、用意するhtmlファイルのソース等が必要かと思います。


  • Moderator

    報告しました!(VB-27194)

    報告する際に以下のhtmlソースをテスト用に添付いたしました。

    報告した再現手順は、

    1. 下記ソースのhtmlファイルを作成する
    2. htmlファイルを開く
    3. ドラッグアンドドロップをテストする
    4. dragenter, dragover, dragleave, drop イベントがconsoleに表示されていることを確認する
    5. 任意のタブとタイリングする
    6. もう一度テストする

    となります

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>drag-and-drop</title>
    <style>
    html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      position: relative;
    }
    #drop-area {
      background-color: lightgray;
      display: table;
      height: 80%;
      width: 80%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    </style>
    </head>
    <body>
    <div id="drop-area">
    </div>
    <script type="text/javascript">
    var dragged;
    document.addEventListener("drag", function(event) {
    }, false);
    document.addEventListener("dragstart", function(event) {
      dragged = event.target;
    }, false);
    document.addEventListener("dragend", function(event) {
    }, false);
    document.addEventListener("dragover", function(event) {
      event.preventDefault();
      if(event.target.id == "drop-area") {
        console.log("dropover");
      }
    }, false);
    document.addEventListener("dragenter", function(event) {
      if(event.target.id == "drop-area") {
        console.log("dragenter");
      }
    }, false);
    document.addEventListener("dragleave", function(event) {
      if(event.target.id == "drop-area") {
        console.log("dragleave");
      }
    }, false);
    document.addEventListener("drop", function(event) {
      event.preventDefault();
      if(event.target.id == "drop-area") {
        console.log("drop");
      }
    }, false);
    </script>
    </body>
    </html>
    

Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.