How to do drag and drop like medium?

Question

I am new to javascript I am pretty confused with this drag n drop operation .I wanted to like medium.com Like this.

GIF

I am building an content Editor with draft js , And I don't have any idea how to do this in javascript. Thanks in advance...

Can you elaborate a little more what you are looking for? Do you just want an explanation of html 5 drag and drop? — camccar, Apr 13 '17 at 16:08
NO i want the funtionality like .When i Drag the Image it automatically suggest the location Right I want Like that — Nane, Apr 13 '17 at 16:09
So you want it work such that as you are entering the drop area, the area expands with a border indicating that this is where the data will be shown? — camccar, Apr 13 '17 at 16:10
I want this in pure JavaScript because I wanted to Learn these things And Implement in my Content Editor @epascarello — Nane, Apr 13 '17 at 16:18
No I've Searched For it there no tutorial have taught this type of drap n drop mechanism.. @epascarello — Nane, Apr 13 '17 at 16:25
You can look at the example in my answer or you can look at this tutorial https://www.html5rocks.com/en/tutorials/dnd/basics/ Which is where I learned html drag and drop — camccar, Apr 13 '17 at 16:45

score 1 · Accepted Answer · answered Apr 13 '17 at 16:41

You need to use dragEnter as an event to add css to the area. There are a lot of ways to do it.

<div ondragenter="dragEnter()" class="div1" id="test" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

And then in the js

function dragEnter(e){
var thing = document.getElementById('test');
thing.classList.add('div2');

}

your css would look like this

.div1 {
width: 350px;
 height: 70px;
padding: 10px;

  }
.div2 {
 width: 350px;
 height: 70px;
 padding: 10px;
 border: 1px solid #aaaaaa;
 }

Question Close saying too. Broad. It wasnt – Trect Aug 29 '19 at 20:54 — Trect, Aug 29 '19 at 20:54

1 Answers1