js draggable

<script>
  var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function(event) {

  }, false);

  document.addEventListener("dragstart", function(event) {
    // store a ref. on the dragged elem
    dragged = event.target;
    // make it half transparent
    event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function(event) {
    // reset the transparency
    event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function(event) {
    // prevent default to allow drop
    event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function(event) {
    // highlight potential drop target when the draggable element enters it
    if (event.target.className == "dropzone") {
      event.target.style.background = "purple";
    }

  }, false);

  document.addEventListener("dragleave", function(event) {
    // reset background of potential drop target when the draggable element leaves it
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }

  }, false);

  document.addEventListener("drop", function(event) {
    // prevent default action (open as link for some elements)
    event.preventDefault();
    // move dragged elem to the selected drop target
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
      dragged.parentNode.removeChild( dragged );
      event.target.appendChild( dragged );
    }
  }, false);

</script>

View another examples Add Own solution

EnglishAdam 110 points

                                    &lt;p draggable=&quot;true&quot;&gt;This is a draggable paragraph.&lt;/p&gt;

Thank you! 1

4 (1 Votes)

3.44

Learning new things 85 points

                                    &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;DRAG_AND_DROP&lt;/title&gt;
    &lt;style&gt;
  	body{
    background-color: aquamarine;
}
.whiteBox{
    height: 250px;
    width: 250px;
    background-color: rgb(55, 238, 245);
    margin: 10px;
    display: inline-block;
    border: 2px solid red;
}
.imgBox{

    display: flex;
    background-image: url(&quot;image.jpg&quot;);
    height: 230px;
    width: 230px;
    position: relative;
    top: 10px;
    margin:0 auto;
    cursor: pointer;

}
.imgBox1{

    display: flex;
    background-image: url(&quot;image.jpg&quot;);
    height: 230px;
    width: 230px;
    position: relative;
    top: 10px;
    margin:0 auto;
    cursor: pointer;

}
.hold{
    border: 2px dashed rgb(118, 182, 0);
}
.hide{
    display: none;
}
.dragenter{
    background: rgb(221, 115, 96);
    border-color: green;
    border-style: groove;
}
  	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;whiteBox&quot;&gt;
        &lt;div class=&quot;imgBox&quot; draggable=&quot;true&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;whiteBox&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;whiteBox&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;whiteBox&quot;&gt;&lt;/div&gt;
    &lt;script&gt;
  	console.log(&quot;D&amp;D&quot;);

let imgBox = document.querySelector(&quot;.imgBox&quot;);
let whiteBoxes = document.querySelectorAll(&quot;.whiteBox&quot;);

imgBox.addEventListener(&quot;dragstart&quot;, (e) =&gt; {
  console.log(&quot;DRAG STARTED&quot;);
  e.target.className += &quot; hold&quot;;
  setTimeout(() =&gt; {
    e.target.className += &quot; hide&quot;;
  }, 0);
});
imgBox.addEventListener(&quot;dragend&quot;, (e) =&gt; {
  console.log(&quot;DRAG ENDED&quot;);
  e.target.className = &quot;imgBox&quot;;
});

for (whiteBox of whiteBoxes) {
  whiteBox.addEventListener(&quot;dragover&quot;, (e) =&gt; {
    e.preventDefault();
    // console.log(&quot;gj&quot;)
  });
  whiteBox.addEventListener(&quot;dragenter&quot;, (e) =&gt; {
    e.target.className += &quot; dragenter&quot;;
  });
  whiteBox.addEventListener(&quot;dragleave&quot;, (e) =&gt; {
    e.target.className = &quot;whiteBox&quot;;
  });
  whiteBox.addEventListener(&quot;drop&quot;, (e) =&gt; {
    let answer= confirm(&quot;Do you really want to move it&quot;)
    console.log(answer)
    if(answer){
        e.target.append(imgBox)}
        else{
            e.target.className = &quot;whiteBox&quot;;
       
    }
  });
}

  	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Thank you! 8

3.44 (9 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Javascript

Javascript 2023-04-21 22:52:36
Javascript 2022-03-27 22:25:20 javascript download string as file
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
Javascript 2022-03-27 21:15:02 javascript regex french phone number
Javascript 2022-03-27 21:05:03 cypress custom error message
Javascript 2022-03-27 21:00:05 create element javascript with id
Javascript 2022-03-27 20:40:57 feather icons react
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

js draggable

Welcome Back!

Create a Free Account