draggable html

Solutions on MaxInterview for draggable html by the best coders in the world

showing results for - "draggable html"

03 Aug 2018

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>

Gianluca

03 Nov 2020

1<img draggable="true" />

Roman

26 Jan 2017

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

Paolo

28 Oct 2020

1<script>
2  var dragged;
3
4  /* events fired on the draggable target */
5  document.addEventListener("drag", function(event) {
6
7  }, false);
8
9  document.addEventListener("dragstart", function(event) {
10    // store a ref. on the dragged elem
11    dragged = event.target;
12    // make it half transparent
13    event.target.style.opacity = .5;
14  }, false);
15
16  document.addEventListener("dragend", function(event) {
17    // reset the transparency
18    event.target.style.opacity = "";
19  }, false);
20
21  /* events fired on the drop targets */
22  document.addEventListener("dragover", function(event) {
23    // prevent default to allow drop
24    event.preventDefault();
25  }, false);
26
27  document.addEventListener("dragenter", function(event) {
28    // highlight potential drop target when the draggable element enters it
29    if (event.target.className == "dropzone") {
30      event.target.style.background = "purple";
31    }
32
33  }, false);
34
35  document.addEventListener("dragleave", function(event) {
36    // reset background of potential drop target when the draggable element leaves it
37    if (event.target.className == "dropzone") {
38      event.target.style.background = "";
39    }
40
41  }, false);
42
43  document.addEventListener("drop", function(event) {
44    // prevent default action (open as link for some elements)
45    event.preventDefault();
46    // move dragged elem to the selected drop target
47    if (event.target.className == "dropzone") {
48      event.target.style.background = "";
49      dragged.parentNode.removeChild( dragged );
50      event.target.appendChild( dragged );
51    }
52  }, false);
53
54</script>

David

05 Feb 2020

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

Maya

23 Oct 2020

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

similar questions

html no drag image html disable drag image html image not draggable html drag and drag prograssive bar drag and drop sorting drag and drop drag and drop to css

queries leading to this page