拖放多个浏览器窗口/标签

写了一些代码将元素拖放到其他元素。这工作正常。拖放多个浏览器窗口/标签

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

拖放多个浏览器窗口/标签

回答

相关问题