如何在jQuery droppable中更改droppable区域的颜色？

Question

请在此处查看我的jsfiddle：http://jsfiddle.net/fletchadam/mr5Uj/15/

当您从顶部拖动某个项目时，我希望将鼠标悬停在单个可放置区域上以更改颜色。

我相信诀窍在于这个功能：

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

Answer 1

只需在allowDrop函数中添加样式：

function allowDrop(ev){
    ev.preventDefault();
    $(ev.target).css('background-color','#F00');
}

这将在元素上添加红色背景。现在要删除它，请使用dragleave事件：

<div id="div1" class="droparea clearfix" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeStyle(event)">drag here</div>

使用这个Js函数：

function removeStyle(ev) {
     $(ev.target).removeAttr('style');
}

诀窍是使用事件的target，这是你徘徊的div。