Search code examples
javascripthtmlreactjsdraftjs

How to do drag and drop like medium?

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

GIF enter image description here

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...

Solution

  • 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;
 }

    Here is a jsfiddle example. http://jsfiddle.net/camccar/afPrc/197/