Drag n drop
Attribut i HTML
draggable="true"
Events
dragstartdragdragenterdragleavedragoverdropdragend
Exempel
HTML
<ul>
<li ondrop="drop(event)" ondragover="allowDrop(event)"></li>
<li ondrop="drop(event)" ondragover="allowDrop(event)"></li>
<li ondrop="drop(event)" ondragover="allowDrop(event)"></li>
<li ondrop="drop(event)" ondragover="allowDrop(event)"></li>
</ul>
<img src="image.png" draggable="true" id="drag" ondragstart="drag(event)">
CSS
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
flex: 1;
border: 1px solid #000;
padding-bottom: 25%;
position: relative;
width: 25%;
}
img {
border: 0;
position: absolute;
width: 100%;
}
[draggable] {
cursor: grab;
}
[draggable]:active {
cursor: grabbing;
}
Javascript
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Programmeringsspråk
Electron.js
Kuriosa
Liknande namn
Externa länkar
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
flex: 1;
border: 1px solid #000;
padding-bottom: 25%;
position: relative;
width: 25%;
}
img {
border: 0;
position: absolute;
width: 100%;
}
[draggable] {
cursor: grab;
}
[draggable]:active {
cursor: grabbing;
}