3
要素を他の要素にドラッグアンドドロップするコードを記述しました。これは正常に動作します。複数のブラウザウィンドウ/タブでドラッグアンドドロップ
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>しかし、私が欲しいのは、同じブラウザから2つの開いているウィンドウを持っているし、他に一つのウィンドウからdraggable="true"要素をドラッグアンドドロップする機能です。他のウィンドウ/タブからdraging場合
var currentDragElement = null;
がnull残っているので、私のコードとして
は今、それが動作しませんです。問題は、同じブラウザの他のウィンドウまたはタブでドラッグ開始要素を開始するとどうすればよいのですか？だから同じウィンドウ内にドラッグアンドドロップすれば、異なるウィンドウからドラッグすると同じようにコンソールに状態を表示させたい。
助けてくれてありがとうございます。
"他のウィンドウで起動した場合、ブラウザ？だから、私は短所をしたい同じウインドウにドラッグ＆ドロップすれば、これと同じように異なるウインドウからドラッグすると同じものが表示されます。 javascriptをタブごとに区切って実行することはできません –
Windows /タブ間でドラッグできない場合は、おそらくlocalstorageを使用してペーストビンを作ることができますか？ – Mouser
ウィンドウ間をドラッグするとIE Edgeで動作するようです。 – Mouser