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>

我的问题是，在e.preventDefault()事件监听器中使用img时，我在用户拖动img时丢失了 ghost元素效果。

如何启用它并使用preventDefault()通话？

Answer 1

鬼元素效果来自draggable的默认<img>属性

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

遗憾的是，rect元素不支持此功能。您可以使用onmouseover元素上的rect事件来执行某些操作，但是用户需要在放下鼠标后才能移动鼠标。

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>

[EDIT]如果您想继续使用完美解决方案的rect元素，则需要在svg上使用ondrop，并且您会在{{1 }} see documentation here。

祝你好运！

Answer 2

经过一些搜索和测试，我提出了两种可能的解决方案：

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

请改为将mousedown应用于拖动元素，并将mouseup应用于drop元素。在mousedown事件中，需要preventDefault()调用。这将在用户拖动时消除重影元素效果。为了重新引入这种效果，您需要使用css属性pointer-events: none和position: absolute构建自己的ghost元素。

第二个解决方案：部分拖放html5功能。

在拖动元素（img）上设置dragstart事件，在放置元素（svg）上设置drop和dragover。在e.target事件中选中drop，您将获得svg:rect元素的引用。

此处的示例： https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de

N.B。请记住添加其他事件并管理其他案件。

JS-使用preventDefault调用

2 个答案: