I have 2 images.
What i want to do is to make it clickable and selectable.
If i select the first one the other should not be selected.
and if i click a button it should print the vaalue of the selected image on <p> tag
This is the code which i got after searching a lot :
$('#img1').click(function() {
var a = $('#img1');
//A if else condition should be here to know wheather it already contain the class
a.addClass('clicked')
})
$('#img2').click(function() {
var a = $('#img2');
//A if else condition should be here to know wheather it already contain the class
a.addClass('clicked')
})
$('button').click(function() {
var a = $('#img1').val();
var b = $('#img2').val();
$('p').html(/*The value of the selected image*/)
})
.clicked {
box-shadow: 0 0 10px 2px grey;
}
img:hover {
cursor: pointer;
box-shadow: 0 0 10px 2px grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/howto/img_avatar.png" width="100px" height="100px" id="img1" value="noo">
<img src="http://www.w3schools.com/howto/img_avatar2.png" width="100px" height="100px" id="img2" value="yes"><br>
<button>
Copy
</button>
<p>
</p>
Jsfiddle
Thanks
I have updated your js use $('#img1').removeClass('clicked'); on click functions
$('#img1').click(function() {
var a = $('#img1');
$('#img2').removeClass('clicked');
//A if else condition should be here to know wheather it already contain the class
a.addClass('clicked')
})
$('#img2').click(function() {
var a = $('#img2');
$('#img1').removeClass('clicked');
//A if else condition should be here to know wheather it already contain the class
a.addClass('clicked')
})
Please use this code.
$(document).ready(function(){
$('img').click(function() {
$('img').removeClass('clicked');
$(this).addClass('clicked');
})
$('button').click(function() {
var value = $('.clicked').attr("value");
$('p').html(value);
})
});
$('img').click(function() {
$('img').removeClass('clicked')
$(this).addClass('clicked');
console.log($(this).attr('data-value'))
})
$('button').click(function() {
$('p').html($('img.clicked').attr('data-value'))
})
.clicked {
box-shadow: 0 0 10px 2px grey;
}
img:hover {
cursor: pointer;
box-shadow: 0 0 10px 2px grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/howto/img_avatar.png" width="100px" height="100px" id="img1" data-value="noo">
<img src="http://www.w3schools.com/howto/img_avatar2.png" width="100px" height="100px" id="img2" data-value="yes"><br>
<button>
Copy
</button>
<p>
</p>
change attr value to data-attr since it is not a valid attr
use img tag then detect the click element with this context
the use the data-attr to show the value
Try this
$('#img1').click(function() {
resetClick();
var a = $('#img1');
//A if else condition should be here to know wheather it already contain the class
a.addClass('clicked')
})
$('#img2').click(function() {
resetClick();
var a = $('#img2');
//A if else condition should be here to know wheather it already contain the class
a.addClass('clicked')
})
function resetClick(){
$('#img1').removeClass('clicked');
$('#img2').removeClass('clicked');
}
$('button').click(function() {
$('p').html( $('img.clicked').attr('value'));
})
.clicked {
box-shadow: 0 0 10px 2px grey;
}
img:hover {
cursor: pointer;
box-shadow: 0 0 10px 2px grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/howto/img_avatar.png" width="100px" height="100px" id="img1" value="noo">
<img src="http://www.w3schools.com/howto/img_avatar2.png" width="100px" height="100px" id="img2" value="yes"><br>
<button>
Copy
</button>
<p>
</p>
$('#img1').click(function() {
var a = $('#img1');
$('#img2').removeClass('clicked');
//A if else condition should be here to know wheather it already contain the class
a.addClass('clicked')
})
$('#img2').click(function() {
var a = $('#img2');
$('#img1').removeClass('clicked');
//A if else condition should be here to know wheather it already contain the class
a.addClass('clicked')
})
$('button').click(function() {
$('p').html($('.clicked').attr('value'))
})
.clicked {
box-shadow: 0 0 10px 2px grey;
}
img:hover {
cursor: pointer;
box-shadow: 0 0 10px 2px grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/howto/img_avatar.png" width="100px" height="100px" id="img1" value="noo">
<img src="http://www.w3schools.com/howto/img_avatar2.png" width="100px" height="100px" id="img2" value="yes"><br>
<button>
Copy
</button>
<p>
</p>
Related
I can't figure out how to close one submenu when another one is open. I'm not sure if html is needed here, so I'm just attaching JS code here:
const burgerBtn = document.querySelector(".header__burger"),
menu = document.querySelector(".menu"),
body = document.querySelector(".body"),
filter = document.querySelector(".filter"),
blockFilter = document.querySelectorAll(".block-filter"),
dropdown = document.querySelectorAll(".block-filter__dropdown");
if (filter) {
blockFilter.forEach(item => {
item.addEventListener("click", event => {
item.querySelector(".block-filter__dropdown").classList.toggle("block-filter__dropdown_state_active");
item.querySelector(".block-filter__icon").classList.toggle("block-filter__icon_state_active");
if (event.target.classList.contains("block-filter__item")) {
item.querySelector(".block-filter__value").textContent = event.target.textContent;
}
})
})
}
<div class="filter hero__filter">
<form class="filter__form">
<div class="filter__block block-filter">
<div class="block-filter__button">
<div class="block-filter__header">
<span class="block-filter__type">Purpose</span>
<div class="block-filter__icon"></div>
</div>
<span class="block-filter__value">Buy</span>
</div>
<div class="block-filter__dropdown">
<span class="block-filter__item">Buy</span>
<span class="block-filter__item">Sell</span>
</div>
</div>
Sure, just remove the class from the active one first:
item.addEventListener("click", (event) => {
// get active, and if it exists, remove active
document.querySelector(".block-filter__dropdown_state_active")?.classList.remove("block-filter__dropdown_state_active");
item.querySelector(".block-filter__dropdown").classList.toggle(
"block-filter__dropdown_state_active"
);
item.querySelector(".block-filter__icon").classList.toggle(
"block-filter__icon_state_active"
);
if (event.target.classList.contains("block-filter__item")) {
item.querySelector(".block-filter__value").textContent =
event.target.textContent;
}
});
We use ?. here to prevent us from going further (and causing an error) if there is no active dropdown already.
What you need to do is look for a currently active item first and "de-activate" them. You should also check that the currently active item is not the clicked item as you already have logic defined for that.
I've expanded on your snippet to create a solution.
NOTE: It might be useful creating a separate function/s for handling to "activate" and "de-activate" code where you pass in a .block-filter element.
const burgerBtn = document.querySelector(".header__burger"),
menu = document.querySelector(".menu"),
body = document.querySelector(".body"),
filter = document.querySelector(".filter"),
blockFilter = document.querySelectorAll(".block-filter"),
dropdown = document.querySelectorAll(".block-filter__dropdown");
if (filter) {
blockFilter.forEach(item => {
item.addEventListener("click", event => {
const active_dropdown = document.querySelector(".block-filter__dropdown_state_active");
if(active_dropdown !== null){
// get parent until we find ".block-filter"
const active_item = active_dropdown.closest(".block-filter");
// check it's not the current item
if(active_item !== null && active_item !== item){
// apply same logic as below to remove active state
active_item.querySelector(".block-filter__dropdown").classList.remove("block-filter__dropdown_state_active");
active_item.querySelector(".block-filter__icon").classList.remove("block-filter__icon_state_active");
}
}
// your original logic
item.querySelector(".block-filter__dropdown").classList.toggle("block-filter__dropdown_state_active");
item.querySelector(".block-filter__icon").classList.toggle("block-filter__icon_state_active");
if (event.target.classList.contains("block-filter__item")) {
item.querySelector(".block-filter__value").textContent = event.target.textContent;
}
})
})
}
/* base styles */
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
background-color: #f3f3f3;
}
.filter.hero__filter {
width:600px;
margin:auto;
border: 2px solid #eee;
background-color: #fff;
}
.filter__form {
display:flex;
}
.filter__block {
flex: 1;
padding: 5px;
position: relative;
}
.block-filter__header {
font-weight:600;
font-size:12px;
color: #555;
}
.block-filter__dropdown {
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background-color:#fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border-radius:4px;
}
.block-filter__dropdown_state_active {
display: block;
}
.block-filter__item {
padding: 5px 10px;
display:block;
border-bottom: 1px solid #eee;
}
.block-filter__item:last-child {
border-bottom: none;
}
<div class="filter hero__filter">
<form class="filter__form">
<div class="filter__block block-filter">
<div class="block-filter__button">
<div class="block-filter__header">
<span class="block-filter__type">Purpose</span>
<div class="block-filter__icon"></div>
</div>
<span class="block-filter__value">Buy</span>
</div>
<div class="block-filter__dropdown">
<span class="block-filter__item">Buy</span>
<span class="block-filter__item">Sell</span>
</div>
</div>
<div class="filter__block block-filter">
<div class="block-filter__button">
<div class="block-filter__header">
<span class="block-filter__type">Second</span>
<div class="block-filter__icon"></div>
</div>
<span class="block-filter__value">Alpha</span>
</div>
<div class="block-filter__dropdown">
<span class="block-filter__item">Bravo</span>
<span class="block-filter__item">Charlie</span>
<span class="block-filter__item">Delta</span>
</div>
</div>
</form>
</div>
I change the background color of a div to yellow after clicking on a button by using localStorage. If the user clicks on another button the old button still has a yellow background colour. It only turns white if I click on it again.
What I want to achieve is that only the button that was clicked on should have the yellow background colour, but I'm struggling to get this working using localStorage.
This is the function that changes the colour onclick:
function selected(item) {
if(item.style.backgroundColor == 'yellow'){
// means the item is selected already. So unset it.
item.style.backgroundColor = 'white';
localStorage.removeItem(item.id);
}
else{
item.style.backgroundColor = 'yellow';
console.log(item.id);
localStorage.setItem(item.id, 'any value');
}
}
This is what the divs look like:
<div class="link" id="firstlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div>
Here's the full code:
<style>
#sideNavBox {display:none}
#contentBox {margin-left:0px}
#nav {
display: flex;
flex-wrap: wrap;
flex: 1 1 0px
}
.link {
max-width: 150px;
padding: 3px;
margin: 10px;
border: 2px solid lime;
border-radius: 15px;
flex-basis: 100%;
text-align: center;
cursor: pointer;
}
.active {
background-color: lime
}
.dd13:hover { cursor: pointer; }
.dd13 {
color: #FFFFFF;
Font: 12px Arial
background-color:: #48A040;
Padding: 3px 3px 3px 3px;
}
#pageStatusBar{
display:none!important;
}
</style><script>
window.addEventListener("load", function() {
document.getElementById("nav").addEventListener("click", function(e) {
if (e.target.classList.contains("link")) {
location = e.target.getAttribute("data-link");
}
})
})
var divItems = document.getElementsByClassName("link");
function selected(item) {
if(item.style.backgroundColor == 'yellow'){
// unset the item that is already selected
item.style.backgroundColor = 'white';
localStorage.removeItem(item.id);
}
else{
item.style.backgroundColor = 'yellow';
console.log(item.id);
localStorage.setItem(item.id, 'any value');
}
}
</script>
<h2>
<b>Seminare nach Standort filtern</b></h2>
<div id="nav">
<div class="link" id="firstlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div>
<div class="link" id="secondlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div>
<div class="link" id="thirdlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div>
<div class="link" id="fourthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln" style="background-color: white;">Köln</div>
<div class="link" id="fifthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div>
<div class="link" id="sixthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div>
<div class="link" id="seventhlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel" style="background-color: white;">Kiel<br/></div>
</div>
<div id="register">
<p>To register yourself to a seminar please click on this icon
<a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
<a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div>
<script>
if(localStorage.getItem("firstlink")){
document.getElementById('firstlink').style.backgroundColor = "yellow";
}
if(localStorage.getItem("secondlink")){
document.getElementById('secondlink').style.backgroundColor = "yellow";
}
if(localStorage.getItem("thirdlink")){
document.getElementById('thirdlink').style.backgroundColor = "yellow";
}
if(localStorage.getItem("fourthlink")){
document.getElementById('fourthlink').style.backgroundColor = "yellow";
}
if(localStorage.getItem("fifthlink")){
document.getElementById('fifthlink').style.backgroundColor = "yellow";
}
if(localStorage.getItem("sixthlink")){
document.getElementById('sixthlink').style.backgroundColor = "yellow";
}
if(localStorage.getItem("seventhlink")){
document.getElementById('seventhlink').style.backgroundColor = "yellow";
}
</script>
I thought of doing something like this:
function selected(item) {
if(item.style.backgroundColor == 'yellow'){
// unset the item that is already selected
item.style.backgroundColor = 'white';
localStorage.removeItem(item.id);
} else if((document.getElementById("firstlink") has backgroundcolour ) || (document.getElementById("secondlink") has backgroundcolour)... ){
// remove backgroundColor
} else{
item.style.backgroundColor = 'yellow';
console.log(item.id);
localStorage.setItem(item.id, 'any value');
}
}
but that's more or less pseudocode because I don't know how one can do that.
Any help is appreciated!
You could first make all links white before performing your yellow/not-yellow click logic.
Here's a working example (using fakeLocalStorage because SO doesn't allow localStorage):
// change all but the locally stored link to white
function allLinksToWhite() {
let links = document.getElementsByClassName('link');
for (let link of links) {
if (link.id === fakeLocalStorage.getItem(link.id)) {
continue;
}
link.style.backgroundColor = 'white';
}
}
function selected(item) {
allLinksToWhite();
if (item.style.backgroundColor == 'yellow') {
item.style.backgroundColor = 'white';
fakeLocalStorage.removeItem(item.id);
} else {
item.style.backgroundColor = 'yellow';
// console.log(item.id);
fakeLocalStorage.setItem(item.id, 'any value');
}
}
// a "fake" localStorage because SO blocks localStorage
const fakeLocalStorage = {
_storage: {},
getItem: (name) => fakeLocalStorage._storage[name],
setItem: (name, value) => {
fakeLocalStorage._storage[name] = value;
},
removeItem: (name) => {
if (fakeLocalStorage._storage[name]) {
delete fakeLocalStorage._storage[name];
}
}
}
.link {
max-width: 150px;
padding: 2px;
margin: 4px;
border: 2px solid lime;
border-radius: 15px;
flex-basis: 100%;
text-align: center;
cursor: pointer;
}
<div class="link" id="firstlink" onclick="selected(this)" style="background-color: white;">Ulm</div>
<div class="link" id="secondlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div>
<div class="link" id="thirdlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div>
<div class="link" id="fourthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln" style="background-color: white;">Köln</div>
<div class="link" id="fifthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div>
<div class="link" id="sixthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div>
<div class="link" id="seventhlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel" style="background-color: white;">Kiel<br/></div>
Do you need to do it with localStorage? If you don't, you can just set a variable, let's say buttonThatIsCurrentlyYellow which stores the id of the button that is yellow at the moment. Then, when a new button is clicked, you change the button with id stored in that variable to white and make the new button yellow, updating the variable accordingly.
If you need to use localStorage, rather than setting multiple items, you could instead set just one, something like:
window.localStorage.setItem("yellowButton", "your-btn-id")
Then you always make buttons white by default except for the one with the id stored there. On each click you update "yellowButton" to reflect the id of the new button that should be yellow and update the colors accordingly (old id becomes white, new id becomes yellow)
i am working on my game but i have some problems...
1. if the image is in the class .room it has a another src but if you drop it in the class .items it should change to a icon. And if you drag it again to .room it will turn back.
2. There are many different image so i want to have a switch. if the draged objekt is dragging to .items the image should change. so the id of the image should go to the switch and check if the id and case is the same. the scr should be from the icon.
3. if it is possible i want to safe the id of the image in local.storage so i can use the objekt in the next page
<html>
<head>
<style>
.room {
width: 500px;
height: 150px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.items {
width: 500px;
height: 150px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
if (ev.target.className === "items") {
ev.target.style.border = "3px dashed black";
}
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("img", ev.target.id);
}
function dragleave(ev) {
if (ev.target.className === "items") {
ev.target.style.border = "0px dashed transparent";
}
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("img");
ev.target.style.border = "0px dashed transparent";
if (ev.target=="[object HTMLImageElement]"){
ev.target = ev.target.parentNode;
}
else {
ev.target.appendChild(document.getElementById(data));
}
if (ev.target.id === ev.dataTransfer.getData("ori")) {
return;
}
var image = document.createElement("img");
image.id =
image.draggable = true;
image.addEventListener('dragstart', drag);
if (ev.target.className === 'items') {
icon();
} else if (ev.target.className === 'room') {
room();
}
var originEle = document.getElementById(ev.dataTransfer.getData("ori"));
originEle.outerHTML = '';
delete originEle;
ev.target.appendChild(image);
}
function icon(){
switch(image.id) {
case "teddy": image.src="pic/Icons/teddy.png";break;
case "book": image.src="pic/Icons/Buch.png";break;
}
}
function room(){
switch(image.id) {
case "teddy": image.src= "pic/Home/HomeRoom_booksL.png";break;
case "booksR": image.src= "pic/Home/HomeRoom_buch.png";break;}
}
function reset(){
var container = document.getElementById("field");
container.innerHTML= html;
}
var html;
window.onload = function(){
html = document.getElementById('field').innerHTML;
};
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<div>
<div class="room" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<h2>items</h2>
<div class="items" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="book" src="pic/Icons/Buch.png" draggable="true" ondragstart="drag(event)" id="drag1">
<img id="teddy" alt="booksL"src="pic/Home/HomeRoom_teddy.png" id="drag2" draggable="true" ondragstart="drag(event)" >
</div>
</div>
</body>
</html>
About the 3rd question - saving to localStorage:
add the code below to your drop function.
localStorage.setItem("name", data);
Here is the method I’m trying to make. Basically what it’s supposed to do is, when an <input> with the type of button is clicked, it makes the next <div> (in this case hard-coded) go from display: none to display: block. However it’s not working.
matchDivs() {
let showInputs = document.querySelectorAll('input')
const inputs = Array.from(showInputs)
inputs.map(input => {
if (input.parentNode.getAttribute('class') === 'first-employee') {
document.querySelector('.second-employee').setAttribute('style', 'display: block')
}
return input
})
}
When you use if (node.getAttribute('class') === 'first-employee') this is return:
class='first-employee' // true
class='employee first-employee' // false
You must use:
if (node.classList.contains("first-employee")):
class='first-employee' // true
class='employee first-employee' // true
If I have understand your question properly that on button click you want to show/hide DIV tag next to it, which is inside common parent div for both, button and 'second-employee'.
I think below will be helpful.
// For single Div show/hide on button click
let btnMatchDiv = document.querySelector('#btnMatchDivs');
btnMatchDiv.addEventListener('click', matchDivs, true);
function matchDivs() {
let showInputs = document.querySelectorAll('input')
const inputs = Array.from(showInputs)
inputs.map(input => {
// Method 1
// ===========================
/*if (input.parentNode.getAttribute('class') === 'first-employee') {
document.querySelector('.second-employee').setAttribute('style', 'display: block')
}*/
// Method 2 : you can use new classList method
// ===========================
if (input.parentNode.classList.contains('first-employee')) {
input.nextElementSibling.classList.toggle('hidden');
}
//return input
})
}
body {
font-family: Arial;
}
.first-employee {
display: block;
padding: 1em;
border: 1px solid green;
}
.second-employee {
padding: 1em;
border: 1px solid red;
}
#btnMatchDivs {
padding: 1em 0.5em;
border: 1px solid #777;
}
.hidden {
display: none
}
<div class="first-employee">
<h2>
First Employee
</h2>
<input type="button" id="btnMatchDivs" value="Toggle Second Employee" />
<div class="second-employee hidden">
Second Employee
</div>
</div>
Please let me know if you need further help on this.
Thanks,
Jignesh Raval
Also if you want to toggle multiple items then you can try below code.
// For multiple Div show/hide on button click
// ===================================
let showInputs = document.querySelectorAll('input')
const btnInputs = Array.from(showInputs)
// Bind click event to each button input
btnInputs.map(input => {
input.addEventListener('click', matchDivs, false);
})
function matchDivs(event) {
let buttonEle = event.currentTarget;
if (buttonEle.parentNode.classList.contains('first-employee')) {
buttonEle.nextElementSibling.classList.toggle('hidden');
}
}
body {
font-family: Arial;
}
.first-employee {
display: block;
padding: 1em;
border: 1px solid green;
margin-bottom: 1em;
}
.second-employee {
margin: 1em 0;
padding: 1em;
border: 1px solid red;
}
#btnMatchDivs {
padding: 1em 0.5em;
border: 1px solid #777;
}
.hidden {
display: none
}
<div class="first-employee">
<h2>
First Employee 1
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 1
</div>
</div>
<div class="first-employee">
<h2>
First Employee 2
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 2
</div>
</div>
<div class="first-employee">
<h2>
First Employee 3
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 3
</div>
</div>
I hope this will be helpful.
Thanks,
Jignesh Raval
How can make a draggable element to remain displayed on its source box after being dragged?
Below the script to illustrate it:
function dragStart(ev) {
ev.dataTransfer.setData('text1', ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text1');
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev) {
ev.preventDefault();
}
.boxarticle {
width: 200px;
height: 150px;
border: 1px solid blue;
margin: 0 0 10px 20
}
div#panier {
width: 150px;
height: 150px;
background-color: ;
border: 1px solid blue;
}
<!-- I want that image to remain here after I dragged it -->
<div class='boxarticle'>
<img src="https://cdn-images-1.medium.com/max/1200/1*QQvzwKk7rdC1JkY0XiPVUQ.png" draggable="true" id='image' data-price='9200' ondragstart="dragStart(event)" width=80 height=80>
</div>
<!-- where draggable element go in -->
<div id="panier" ondrop='drop(event)' ondragover="allowDrop(event)"> Drag and drop image here..but leave it in the source place </div>
You need to clone it and give it a new id, otherwise it will assume "drag".
HTML5 drag and copy?
function dragStart(ev)
{
ev.dataTransfer.setData('text1',ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("text1");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "randomId";
ev.target.appendChild(nodeCopy);
}
function allowDrop(ev)
{
ev.preventDefault();
}
.boxarticle {
width:200px;height: 150px; border:1px solid blue;margin: 0 0 10px 20
}
div#panier {
width:150px;height: 150px;background-color: ; border: 1px solid blue;
}
<!-- I want that image to remain here after I dragged it -->
<div class='boxarticle'>
<img src="https://cdn-images-1.medium.com/max/1200/1*QQvzwKk7rdC1JkY0XiPVUQ.png" draggable="true" id='image' data-price='9200' ondragstart="dragStart(event)" width=80 height=80>
</div>
<!-- where draggable element go in -->
<div id="panier" ondrop='drop(event)' ondragover="allowDrop(event)"> Drag and drop image here..but leave it in the source place </div>