js draggable

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

showing results for - "js draggable"

24 Jun 2017

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

Camilla

28 Jan 2019

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>

Amelia

21 Nov 2016

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

similar questions

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

queries leading to this page