如何做拖放像介質？

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/