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 ライブラリを使用したりできます。アプリは、The Echo Nest などのサードパーティの Web サービスに接続できます。Spotify アプリは、Chrome ブラウザーがサポートするほぼすべてをサポートしていますが、いくつかの例外があります: Web オーディオ、ビデオ、位置情報、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;
}

ジャバスクリプト:

//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 に答える