拖放多個瀏覽器窗口/標籤

寫了一些代碼將元素拖放到其他元素。這工作正常。拖放多個瀏覽器窗口/標籤

var currentDragElement = null; 
 
var draggableElements = document.querySelectorAll('[draggable="true"]'); 
 

 

 
[].forEach.call(draggableElements, function(element) { 
 
    element.addEventListener('dragstart', handleDragStart, false); 
 
    element.addEventListener('dragenter', handleDragEnter, false); 
 
    element.addEventListener('dragover', handleDragOver, false); 
 
    element.addEventListener('dragleave', handleDragLeave, false); 
 
    element.addEventListener('drop', handleDrop, false); 
 
    element.addEventListener('dragend', handleDragEnd, false); 
 
}); 
 

 
function handleDragStart(event) { 
 
    currentDragElement = event.target; 
 
    event.dataTransfer.setData("text/plain", event.target.dataset.uuid); 
 
} 
 

 

 
function handleDragOver(event) { 
 
    event.preventDefault(); 
 

 
    event.dataTransfer.dropEffect = 'move'; 
 
    return false; 
 
} 
 

 
function handleDragEnter(event) { 
 
    this.classList.add('over'); 
 
} 
 

 
function handleDragLeave(event) { 
 
    this.classList.remove('over'); 
 
} 
 

 
function handleDrop(event) { 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 

 
    if(currentDragElement == event.target) { 
 
     return; 
 
    } 
 

 
    console.log('dragged element ', currentDragElement.dataset.uuid , ' on element ', event.target.dataset.uuid) 
 

 
    return false; 
 
} 
 

 
function handleDragEnd(event) { 
 
    [].forEach.call(draggableElements, function (element) { 
 
     element.classList.remove('over'); 
 
    }); 
 
}

section { 
 
    border: solid 5px green; 
 
    margin: 20px; 
 
    float: left; 
 
    width: 40%; 
 
} 
 

 
[draggable="true"]:hover { 
 
    opacity: 0.6; 
 
} 
 

 
[draggable="true"] { 
 
    cursor: move; 
 
    background-color: #acacac; 
 
    padding: 10px; 
 
    margin: 10px; 
 
} 
 

 
.over[draggable="true"] { 
 
    background-color: orange; 
 
}

<section> 
 
    <div draggable="true" data-uuid="1.1">draggable 1.1</div> 
 
    <div draggable="true" data-uuid="1.2">draggable 1.2</div> 
 
    <div draggable="true" data-uuid="1.3">draggable 1.3</div> 
 
</section> 
 

 
<section> 
 
    <div draggable="true" data-uuid="2.1">draggable 2.1</div> 
 
    <div draggable="true" data-uuid="2.2">draggable 2.2</div> 
 
    <div draggable="true" data-uuid="2.3">draggable 2.3</div> 
 
</section>

但我要的是從同一個瀏覽器有兩個打開的窗口，然後將其從一個窗口中draggable="true"元素拖放到其他的能力。

由於我的代碼是現在不工作，因爲

var currentDragElement = null;

仍然null如果從其他窗口/標籤draging。問題是如何在相同瀏覽器的其他窗口或選項卡中啓動時如何獲取拖動開始元素？所以如果拖放到同一個窗口，我想讓控制檯從不同的窗口拖動到現在的狀態。

請不要jQuery的答案，謝謝你的幫助！

來源

2017-04-06 caramba

「現在的問題是我怎麼能獲得拖拽開始元素，如果開始在其他窗口或相同的標籤瀏覽器？所以我想要的缺點如果在同一窗口中拖放，就可以像現在一樣從不同的窗口拖動來表示相同的狀態。「你不能在每個標籤頁執行javascript –

那麼，如果在Windows /標籤之間拖動不可能，你可以使用localstorage製作一個pastebin？ – Mouser

在窗口之間拖動似乎在IE Edge中工作。 – Mouser

由於@Mouser指出的localStorage確實在谷歌瀏覽器測試的伎倆，即使沒有任何AJAX請求等..

只有

使用localStorage的在SO不允許撥弄所以如果有人想嘗試了這一點拷貝以下文件保存，在兩個瀏覽器窗口中打開它，有樂趣的拖放

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>drag - drop - demo</title> 
    <style> 

     section { 
      border: solid 5px green; 
      margin: 20px; 
      float: left; 
      width: 40%; 
     } 

     [draggable="true"]:hover { 
      opacity: 0.6; 
     } 

     [draggable="true"] { 
      cursor: move; 
      background-color: #acacac; 
      padding: 10px; 
      margin: 10px; 
     } 

     .over[draggable="true"] { 
      background-color: orange; 
     } 

    </style> 
</head> 
<body> 

<section> 
    <div draggable="true" data-uuid="1.1">draggable 1.1</div> 
    <div draggable="true" data-uuid="1.2">draggable 1.2</div> 
    <div draggable="true" data-uuid="1.3">draggable 1.3</div> 
    <div draggable="true" data-uuid="1.4">draggable 1.4</div> 
    <div draggable="true" data-uuid="1.5">draggable 1.5</div> 
</section> 

<section> 
    <div draggable="true" data-uuid="2.1">draggable 2.1</div> 
    <div draggable="true" data-uuid="2.2">draggable 2.2</div> 
    <div draggable="true" data-uuid="2.3">draggable 2.3</div> 
    <div draggable="true" data-uuid="2.4">draggable 2.4</div> 
    <div draggable="true" data-uuid="2.5">draggable 2.5</div> 
</section> 

<script> 

    var draggableElements = document.querySelectorAll('[draggable="true"]'); 

    [].forEach.call(draggableElements, function(element) { 
     element.addEventListener('dragstart', handleDragStart, false); 
     element.addEventListener('dragenter', handleDragEnter, false); 
     element.addEventListener('dragover', handleDragOver, false); 
     element.addEventListener('dragleave', handleDragLeave, false); 
     element.addEventListener('drop', handleDrop, false); 
     element.addEventListener('dragend', handleDragEnd, false); 
    }); 

    function handleDragStart(event) { 
     localStorage.setItem('currentDragElement', event.target.dataset.uuid); 
     event.dataTransfer.setData("text/plain", event.target.dataset.uuid); 
    } 


    function handleDragOver(event) { 
     event.preventDefault(); 
     event.dataTransfer.dropEffect = 'move'; 
     return false; 
    } 

    function handleDragEnter(event) { 
     this.classList.add('over'); 
    } 

    function handleDragLeave(event) { 
     this.classList.remove('over'); 
    } 

    function handleDrop(event) { 
     event.stopPropagation(); 
     event.preventDefault(); 

     if(localStorage.getItem('currentDragElement') == event.target.dataset.uuid) { 
      return; 
     } 

     currentDragElement = document.querySelector('[data-uuid="'+localStorage.getItem('currentDragElement')+'"]'); 

     console.log('dragged element ', currentDragElement , ' on element ', event.target) 

     localStorage.setItem('currentDragElement', null); 

     return false; 
    } 

    function handleDragEnd(event) { 
     [].forEach.call(draggableElements, function (element) { 
      element.classList.remove('over'); 
     }); 
    } 


</script> 

</body> 
</html>

來源

2017-04-06 12:22:21 caramba

拖放多個瀏覽器窗口/標籤

回答

相關問題