JS - Enable ghost element effect with preventDefault call
I'm trying to implement operation, I want to drag element from a list of img tags to different svg:rect containers.
Using mousedown and mouseup is sufficient for understand which img is picked from the list and in which svg:rect is dropped.
The code is the following:
<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 problem is that with e.preventDefault() in the img event listener I lost the ghost element effect while user drag the img.
How to enable that and use preventDefault() call?
javascript dom svg mouseevent
asked Nov 19 '18 at 16:02
EduBicEduBic
5116
add a comment |
I'm trying to implement operation, I want to drag element from a list of img tags to different svg:rect containers.
Using mousedown and mouseup is sufficient for understand which img is picked from the list and in which svg:rect is dropped.
The code is the following:
<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 problem is that with e.preventDefault() in the img event listener I lost the ghost element effect while user drag the img.
How to enable that and use preventDefault() call?
javascript dom svg mouseevent
asked Nov 19 '18 at 16:02
EduBicEduBic
5116
add a comment |
I'm trying to implement operation, I want to drag element from a list of img tags to different svg:rect containers.
Using mousedown and mouseup is sufficient for understand which img is picked from the list and in which svg:rect is dropped.
The code is the following:
<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 problem is that with e.preventDefault() in the img event listener I lost the ghost element effect while user drag the img.
How to enable that and use preventDefault() call?
javascript dom svg mouseevent
asked Nov 19 '18 at 16:02
EduBicEduBic
5116
I'm trying to implement operation, I want to drag element from a list of img tags to different svg:rect containers.
Using mousedown and mouseup is sufficient for understand which img is picked from the list and in which svg:rect is dropped.
The code is the following:
<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 problem is that with e.preventDefault() in the img event listener I lost the ghost element effect while user drag the img.
How to enable that and use preventDefault() call?
javascript dom svg mouseevent
javascript dom svg mouseevent
asked Nov 19 '18 at 16:02
EduBicEduBic
5116
asked Nov 19 '18 at 16:02
EduBicEduBic
5116
asked Nov 19 '18 at 16:02
EduBicEduBic
5116
asked Nov 19 '18 at 16:02
EduBicEduBic
5116
asked Nov 19 '18 at 16:02
EduBicEduBic
5116
5116
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The ghost element effect comes from the default draggable property of <img>
Using ondragstart on the image and ondrop on an other element would be perfect. See that exemple.
Sadly it's not supported on rect elements. You can do something with the onmouseover event on the rect elements but the user will need to move the mouse after the drop for it to work.
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] If you want to keep using rect elements with a perfect solution you will need to use ondrop on the svg and you will find the rect element under event.target see documentation here.
Good luck !
answered Nov 19 '18 at 17:04
GuySakeGuySake
954
Thank you for your tips. I've found two solutions (with mouseover they are 3) that I described in my answer.
– EduBic
Nov 20 '18 at 14:47
add a comment |
After some search and tests, I came up with two possible solutions:
First solution: don't use html5 drag and drop at all.
Instead use mousedown applied to the drag element and mouseup applied to the drop element. In mousedown event the preventDefault() call is needed. This remove the ghost element effect while user is dragging. In order to reintroduce that effect you need to build your own ghost element with the css properties pointer-events: none and position: absolute.
Second solution: use partially drag and drop html5 feature.
Set dragstart event on your drag element (img) and drop and dragover on your drop element (svg). Check e.target in the drop event and you have the reference of your svg:rect element.
An example here:
https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de
N.B. remember to add the other event and to manage other cases.
answered Nov 20 '18 at 14:44
EduBicEduBic
5116
Well the Second solution with e.target looks perfect ! Good job ! I'm going to edit my answer if I can.
– GuySake
Nov 21 '18 at 15:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378472%2fjs-enable-ghost-element-effect-with-preventdefault-call%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The ghost element effect comes from the default draggable property of <img>
Using ondragstart on the image and ondrop on an other element would be perfect. See that exemple.
Sadly it's not supported on rect elements. You can do something with the onmouseover event on the rect elements but the user will need to move the mouse after the drop for it to work.
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] If you want to keep using rect elements with a perfect solution you will need to use ondrop on the svg and you will find the rect element under event.target see documentation here.
Good luck !
answered Nov 19 '18 at 17:04
GuySakeGuySake
954
Thank you for your tips. I've found two solutions (with mouseover they are 3) that I described in my answer.
– EduBic
Nov 20 '18 at 14:47
add a comment |
The ghost element effect comes from the default draggable property of <img>
Using ondragstart on the image and ondrop on an other element would be perfect. See that exemple.
Sadly it's not supported on rect elements. You can do something with the onmouseover event on the rect elements but the user will need to move the mouse after the drop for it to work.
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] If you want to keep using rect elements with a perfect solution you will need to use ondrop on the svg and you will find the rect element under event.target see documentation here.
Good luck !
answered Nov 19 '18 at 17:04
GuySakeGuySake
954
Thank you for your tips. I've found two solutions (with mouseover they are 3) that I described in my answer.
– EduBic
Nov 20 '18 at 14:47
add a comment |
The ghost element effect comes from the default draggable property of <img>
Using ondragstart on the image and ondrop on an other element would be perfect. See that exemple.
Sadly it's not supported on rect elements. You can do something with the onmouseover event on the rect elements but the user will need to move the mouse after the drop for it to work.
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] If you want to keep using rect elements with a perfect solution you will need to use ondrop on the svg and you will find the rect element under event.target see documentation here.
Good luck !
answered Nov 19 '18 at 17:04
GuySakeGuySake
954
The ghost element effect comes from the default draggable property of <img>
Using ondragstart on the image and ondrop on an other element would be perfect. See that exemple.
Sadly it's not supported on rect elements. You can do something with the onmouseover event on the rect elements but the user will need to move the mouse after the drop for it to work.
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] If you want to keep using rect elements with a perfect solution you will need to use ondrop on the svg and you will find the rect element under event.target see documentation here.
Good luck !
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>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>answered Nov 19 '18 at 17:04
GuySakeGuySake
954
edited Nov 21 '18 at 15:22
answered Nov 19 '18 at 17:04
GuySakeGuySake
954
answered Nov 19 '18 at 17:04
GuySakeGuySake
954
answered Nov 19 '18 at 17:04
GuySakeGuySake
954
954
Thank you for your tips. I've found two solutions (with mouseover they are 3) that I described in my answer.
– EduBic
Nov 20 '18 at 14:47
add a comment |
Thank you for your tips. I've found two solutions (with mouseover they are 3) that I described in my answer.
– EduBic
Nov 20 '18 at 14:47
Thank you for your tips. I've found two solutions (with mouseover they are 3) that I described in my answer.
– EduBic
Nov 20 '18 at 14:47
Thank you for your tips. I've found two solutions (with mouseover they are 3) that I described in my answer.
– EduBic
Nov 20 '18 at 14:47
add a comment |
After some search and tests, I came up with two possible solutions:
First solution: don't use html5 drag and drop at all.
Instead use mousedown applied to the drag element and mouseup applied to the drop element. In mousedown event the preventDefault() call is needed. This remove the ghost element effect while user is dragging. In order to reintroduce that effect you need to build your own ghost element with the css properties pointer-events: none and position: absolute.
Second solution: use partially drag and drop html5 feature.
Set dragstart event on your drag element (img) and drop and dragover on your drop element (svg). Check e.target in the drop event and you have the reference of your svg:rect element.
An example here:
https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de
N.B. remember to add the other event and to manage other cases.
answered Nov 20 '18 at 14:44
EduBicEduBic
5116
Well the Second solution with e.target looks perfect ! Good job ! I'm going to edit my answer if I can.
– GuySake
Nov 21 '18 at 15:16
add a comment |
After some search and tests, I came up with two possible solutions:
First solution: don't use html5 drag and drop at all.
Instead use mousedown applied to the drag element and mouseup applied to the drop element. In mousedown event the preventDefault() call is needed. This remove the ghost element effect while user is dragging. In order to reintroduce that effect you need to build your own ghost element with the css properties pointer-events: none and position: absolute.
Second solution: use partially drag and drop html5 feature.
Set dragstart event on your drag element (img) and drop and dragover on your drop element (svg). Check e.target in the drop event and you have the reference of your svg:rect element.
An example here:
https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de
N.B. remember to add the other event and to manage other cases.
answered Nov 20 '18 at 14:44
EduBicEduBic
5116
Well the Second solution with e.target looks perfect ! Good job ! I'm going to edit my answer if I can.
– GuySake
Nov 21 '18 at 15:16
add a comment |
After some search and tests, I came up with two possible solutions:
First solution: don't use html5 drag and drop at all.
Instead use mousedown applied to the drag element and mouseup applied to the drop element. In mousedown event the preventDefault() call is needed. This remove the ghost element effect while user is dragging. In order to reintroduce that effect you need to build your own ghost element with the css properties pointer-events: none and position: absolute.
Second solution: use partially drag and drop html5 feature.
Set dragstart event on your drag element (img) and drop and dragover on your drop element (svg). Check e.target in the drop event and you have the reference of your svg:rect element.
An example here:
https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de
N.B. remember to add the other event and to manage other cases.
answered Nov 20 '18 at 14:44
EduBicEduBic
5116
After some search and tests, I came up with two possible solutions:
First solution: don't use html5 drag and drop at all.
Instead use mousedown applied to the drag element and mouseup applied to the drop element. In mousedown event the preventDefault() call is needed. This remove the ghost element effect while user is dragging. In order to reintroduce that effect you need to build your own ghost element with the css properties pointer-events: none and position: absolute.
Second solution: use partially drag and drop html5 feature.
Set dragstart event on your drag element (img) and drop and dragover on your drop element (svg). Check e.target in the drop event and you have the reference of your svg:rect element.
An example here:
https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de
N.B. remember to add the other event and to manage other cases.
answered Nov 20 '18 at 14:44
EduBicEduBic
5116
answered Nov 20 '18 at 14:44
EduBicEduBic
5116
answered Nov 20 '18 at 14:44
EduBicEduBic
5116
answered Nov 20 '18 at 14:44
EduBicEduBic
5116
5116
Well the Second solution with e.target looks perfect ! Good job ! I'm going to edit my answer if I can.
– GuySake
Nov 21 '18 at 15:16
add a comment |
Well the Second solution with e.target looks perfect ! Good job ! I'm going to edit my answer if I can.
– GuySake
Nov 21 '18 at 15:16
Well the Second solution with e.target looks perfect ! Good job ! I'm going to edit my answer if I can.
– GuySake
Nov 21 '18 at 15:16
Well the Second solution with e.target looks perfect ! Good job ! I'm going to edit my answer if I can.
– GuySake
Nov 21 '18 at 15:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378472%2fjs-enable-ghost-element-effect-with-preventdefault-call%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
