如何做拖放像介质？

Question

我是javascript新手我很困惑这拖动n拖放操作。我想喜欢medium.com 像这样。

GIF

我建立与JS草案的内容编辑， 我没有任何想法如何做到这一点在JavaScript。 在此先感谢...

Answer 1

您需要使用dragEnter作为事件以将CSS添加到该区域。有很多方法可以做到这一点。

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

然后在js

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

} 

你的CSS是这样的

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

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

下面是一个例子的jsfiddle。 http://jsfiddle.net/camccar/afPrc/197/