Question

编写了一些代码来将元素拖放到其他元素中。这很好用。

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。问题是如果在同一浏览器的其他窗口或选项卡中启动，如何获取拖动启动元素？因此，如果拖放在同一个窗口中，我希望控制台在不同窗口中拖动时的状态相同。

请不要jQuery回答，谢谢你的帮助！

Answer 1

正如@Mouser所指出的那样，即使没有任何ajax请求等，localstorage也可以做到这一点。

仅在Google Chrome中测试

在SO fiddles中不允许使用localstorage，所以如果有人想要尝试这个，请复制以下文件保存，在两个浏览器窗口中打开它并通过拖放获得乐趣

<!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>

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

1 个答案: