2

我有一个带有 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 中开发它。有谁知道我该如何解决这个问题？

谢谢！

4

1 回答 1

0


在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>



重要参考：

于 2012-08-23T23:50:47.933 回答