javascript - 如何 ondragover 更改 jQuery 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');
}

诀窍是使用事件的目标，即您悬停的 div。