JS - 使用 preventDefault 调用启用幽灵元素效果

Question

我正在尝试执行操作，我想将 img 标签列表中的元素拖到不同的 svg:rect 容器中。

使用 mousedown 和 mouseup 足以理解从列表中选择了哪个 img 以及删除了哪个 svg:rect。

代码如下：

<body>

<div style="border: 1px solid black">
    <svg width="300" height="100">
        <rect id="container" width="60" height="60"></rect>
        <rect id="container2" x="70" width="60" height="60"  fill="salmon"></rect>
    </svg>
</div>

<div id="list">
    <img id="item" src="img/cat.png" width="64" />
</div>

<script>

    const container = document.getElementById('container');
    const container2 = document.getElementById('container2');
    const item = document.getElementById('item');

    let drag = null

    item.addEventListener('mousedown', function (e) {
        e.preventDefault();
        console.log('mouse down from IMG');
        drag = e.target;
    });

    container.addEventListener('mouseup', function (e) {
        e.preventDefault();
        console.log('Container 1', drag);
        drag = null;
    });

    container2.addEventListener('mouseup', function (e) {
        e.preventDefault();
        console.log('Container 2', drag);
        drag = null;
    });
</script>

我的问题是 img 事件侦听器中的 e.preventDefault() 在用户拖动 img 时我失去了 幽灵元素效果 。

如何启用它并使用 preventDefault() 调用？

Answer 1

幽灵元素效果来自<img>

的默认draggable属性

在图像上使用 ondragstart 并在其他元素上使用 ondrop 将是完美的。参见 that exemple。

很遗憾，rect 元素不支持它。您可以在 rect 元素上使用 onmouseover 事件做一些事情，但用户需要在放下鼠标后移动鼠标才能工作。

const container = document.getElementById('container');
const container2 = document.getElementById('container2');
const item = document.getElementById('item');

    let drag = null

function dragImg (e) {
        //e.preventDefault();
        console.log('ondrag IMG');
        drag = e.target;
    };

// Not working
function ondrop1 (e) {
        //e.preventDefault();
        console.log('Container 1', drag);
        drag = null;
    };

// Not working
function ondrop2 (e) {
        //e.preventDefault();
        console.log('Container 2', drag);
        drag = null;
    };

<div style="border: 1px solid black">
    <svg width="300" height="100">
        <rect id="container" onmouseover="ondrop1(event)" width="60" height="60"></rect>
        <rect id="container2" onmouseover="ondrop2(event)" x="70" width="60" height="60"  fill="salmon"></rect>
    </svg>
</div>

<div id="list">
    <img ondragstart="dragImg(event)" id="item" src="https://ddragon.leagueoflegends.com/cdn/8.22.1/img/champion/Velkoz.png" width="64" />
</div>

[编辑] 如果你想继续使用 rect 元素和完美的解决方案，你需要在 svg 上使用 ondrop 并且你会在 event.target see documentation here.

祝你好运！

Answer 2

经过一番搜索和测试，我想到了两种可能的解决方案：

第一个解决方案：根本不要使用html5拖放。

而是使用应用于拖动元素的 mousedown 和应用于放置元素的 mouseup。在 mousedown 事件中需要调用 preventDefault()。这消除了用户拖动时的幽灵元素效果。为了重新引入这种效果，您需要使用 css 属性 pointer-events: none 和 position: absolute.

构建您自己的幽灵元素

第二种解决方案：使用部分拖放html5功能。

在拖动元素 (img) 上设置 dragstart 事件，在拖放元素 (svg) 上设置 drop 和 dragover 事件。检查 drop 事件中的 e.target 并且您有 svg:rect 元素的引用。

举个例子： https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de

N.B. 记得添加其他事件并管理其他案例。

JS - 使用 preventDefault 调用启用幽灵元素效果

JS - Enable ghost element effect with preventDefault call

javascript

dom

svg

mouseevent