I am currently working on a project where I need to drag elements from a list of img tags to various svg:rect containers.
The process involves using mousedown and mouseup events to track which img is being picked from the list and where it is dropped within the svg:rect containers.
Below is the code snippet:
<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>
My issue lies in the fact that by using e.preventDefault() in the img event listener, the ghost element effect is lost when dragging the image. Is there a way to maintain this effect while still utilizing the preventDefault() call?