drag and drop html

Solutions on MaxInterview for drag and drop html by the best coders in the world

showing results for - "drag and drop html"

07 Jun 2020

1<!DOCTYPE HTML>
2<html>
3   <head>
4   <script>
5function allowDrop(ev) {
6    ev.preventDefault();
7}
8
9function drag(ev) {
10    ev.dataTransfer.setData("text", ev.target.id);
11}
12
13function drop(ev) {
14    ev.preventDefault();
15    var data = ev.dataTransfer.getData("text");
16    ev.target.appendChild(document.getElementById(data));
17}
18   </script>
19   </head>
20<body>
21
22   <div id="box" ondrop="drop(event)"
23   ondragover="allowDrop(event)"
24   style="border:1px solid black; 
25   width:200px; height:200px"></div>
26
27   <img id="image" src="sample.jpg" draggable="true"
28   ondragstart="drag(event)" width="150" height="50" alt="" />
29
30</body>
31</html>

Fatma

28 Nov 2016

1<img draggable="true" />

Juliette

27 May 2017

1<p draggable="true">This is a draggable paragraph.</p>

Valery

17 Nov 2018

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>DRAG_AND_DROP</title>
7    <style>
8  	body{
9    background-color: aquamarine;
10}
11.whiteBox{
12    height: 250px;
13    width: 250px;
14    background-color: rgb(55, 238, 245);
15    margin: 10px;
16    display: inline-block;
17    border: 2px solid red;
18}
19.imgBox{
20
21    display: flex;
22    background-image: url("image.jpg");
23    height: 230px;
24    width: 230px;
25    position: relative;
26    top: 10px;
27    margin:0 auto;
28    cursor: pointer;
29
30}
31.imgBox1{
32
33    display: flex;
34    background-image: url("image.jpg");
35    height: 230px;
36    width: 230px;
37    position: relative;
38    top: 10px;
39    margin:0 auto;
40    cursor: pointer;
41
42}
43.hold{
44    border: 2px dashed rgb(118, 182, 0);
45}
46.hide{
47    display: none;
48}
49.dragenter{
50    background: rgb(221, 115, 96);
51    border-color: green;
52    border-style: groove;
53}
54  	</style>
55</head>
56<body>
57    <div class="whiteBox">
58        <div class="imgBox" draggable="true"></div>
59    </div>
60    <div class="whiteBox"></div>
61    <div class="whiteBox"></div>
62    <div class="whiteBox"></div>
63    <script>
64  	console.log("D&D");
65
66let imgBox = document.querySelector(".imgBox");
67let whiteBoxes = document.querySelectorAll(".whiteBox");
68
69imgBox.addEventListener("dragstart", (e) => {
70  console.log("DRAG STARTED");
71  e.target.className += " hold";
72  setTimeout(() => {
73    e.target.className += " hide";
74  }, 0);
75});
76imgBox.addEventListener("dragend", (e) => {
77  console.log("DRAG ENDED");
78  e.target.className = "imgBox";
79});
80
81for (whiteBox of whiteBoxes) {
82  whiteBox.addEventListener("dragover", (e) => {
83    e.preventDefault();
84    // console.log("gj")
85  });
86  whiteBox.addEventListener("dragenter", (e) => {
87    e.target.className += " dragenter";
88  });
89  whiteBox.addEventListener("dragleave", (e) => {
90    e.target.className = "whiteBox";
91  });
92  whiteBox.addEventListener("drop", (e) => {
93    let answer= confirm("Do you really want to move it")
94    console.log(answer)
95    if(answer){
96        e.target.append(imgBox)}
97        else{
98            e.target.className = "whiteBox";
99       
100    }
101  });
102}
103
104  	</script>
105</body>
106</html>
107

Samuel

06 Mar 2020

1function drop(ev) {
2    ev.preventDefault();
3    var data = ev.dataTransfer.getData("text");
4    ev.target.appendChild(document.getElementById(data));
5}

Lena

24 Oct 2020

1function drag(ev) {
2    ev.dataTransfer.setData("text", ev.target.id);
3}

similar questions

html no drag image drag and drop sorting html drag and drag prograssive bar drag and drop angular drag and drop to css

queries leading to this page