如何使用 javascript 更改背景图像 ondragenter 或 ondragover答案

【问题标题】：How to change background-image ondragenter or ondragover with javascript如何使用 javascript 更改背景图像 ondragenter 或 ondragover
【发布时间】：2012-08-23 20:49:26
【问题描述】：

我有一个带有 ondragenter 事件的 div。当鼠标进入 div 时，我希望背景变为特定图像，但直到我松开鼠标按钮后图像才会改变。

如果我尝试更改为背景颜色，它可以正常工作！我还尝试使用背景图像更改 css 类并且它可以工作，但在我的情况下我不能这样做，因为我不知道从 css 中显示哪个图像。

HTML

<div id="test" ondrop="drop(event)" ondragenter="enter(event)"></div>

JavaScript

function enter(event) {
    $('#test').css('background', '#333 url("test.png")');
    event.preventDefault();
}

在我的代码示例中，当鼠标进入时，div 将获得颜色 #333，然后在我松开鼠标按钮时获得背景图像。

我正在基于 webkit 的 spotify 中开发它。有谁知道我该如何解决这个问题？

谢谢！

【问题讨论】：

你可以创建一个 jsfiddle 吗？会更容易解决问题。
它适用于我的 jsFiddle：jsfiddle.net/wQ4Y3。（添加no-repeat 以观察颜色和图像。）

标签： javascript html background drag-and-drop background-image

【解决方案1】：

在http://musicmachinery.com/2011/12/02/building-a-spotify-app/ 上，它说：

开发 Spotify 应用就像开发现代 HTML5 应用一样。你有一个丰富的工具包：CSS、HTML 和 Javascript。您可以使用 jQuery，也可以使用许多 Javascript 库。您的应用可以连接到第 3 方网络服务，例如 The Echo Nest。 Spotify 应用程序几乎支持您的 Chrome 浏览器支持的所有内容，但有一些例外：没有网络音频、没有视频、没有地理定位和 Flash（感谢上帝）。

话虽如此，我建议您使用 Jquery。它不仅易于学习，而且您可以访问 JQuery UI（访问 http://jqueryui.com/demos/ 进行演示）。

至于您的拖放问题，我已经为您做了一个使用 jquery 的示例。该演示可以在HERE 或http://jsfiddle.net/H8fPL/12/ 上找到。我还提供了我在下面使用的代码。需要帮助请叫我！编码愉快！

CSS：

div{
 width:200px;
 height:220px;
 border:1px solid black;    
}

#div1{
 background-color:orange;
 margin-left:20px;
}

.NC{
 background:url("http://www.dreadcentral.com/img/news/jun11/niccage.jpg") no-repeat;   
}

.surprised{
background:url('http://rlv.zcache.ca/smiley_oh_sticker-p217194901605792400envb3_400.jpg');
background-size:80px 60px;
background-repeat:no-repeat;
background-position:center;
}

JAVASCRIPT：

//needed for jquery, 
//CALL THIS SCRIPT BEFORE USING $ syntax
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
//query UI script
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

HTML：

<div id='div1'>
Come Hither...
</div>

<div id="dropme">
DRAG ME OVER AND WATCH ME CHANGE
</div>

重要参考：

http://docs.jquery.com/Main_Page（显然）
http://jqueryui.com/demos/（用户界面演示）
http://jqueryui.com/demos/droppable/（方法/事件/选项必不可少！）
http://jqueryui.com/demos/draggable/#event-drag（方法/事件/选项必不可少！）
http://oscarotero.com/jquery/（jquery 备忘单）

【讨论】：