个人中心
gpt4 book ai didi

javascript - 在多个浏览器窗口/选项卡中拖放

转载 作者：太空狗 更新时间：2023-10-29 16:39:04 27 4
gpt4 key购买 nike

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

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，感谢您的帮助!

最佳答案

作为@Mouser指出 localstorage 即使没有任何 ajax 请求等也能做到这一点..

仅在谷歌浏览器中测试

在 SO fiddles 中不允许使用本地存储，所以如果有人想尝试这个，请复制以下文件保存它，在两个浏览器窗口中打开它并享受拖放的乐趣

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

关于javascript - 在多个浏览器窗口/选项卡中拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43253304/

27 4 0
文章推荐： java - 运算符 != 未定义参数类型 long、null
文章推荐： 使用 Cabal 从 C 调用 Haskell
文章推荐： android - 如何找到 android canvas 的可绘制中心
文章推荐： c - 使用 libavcodec 将音频编码为 aac
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com