イメージボタンをドラッグ可能なDIVに追加し、クリック時にイメージソースをトグルします。

Question

私はドラッグ可能なDIVを持っています。画像はこれらのDIVに追加されます。マウスがDIVの上に来ると、画像のopacityは1に変更されます。マウスが外に出ると、画像は不透明度0になります。クリックで

1. 私は画像close_2.jpgにclose_1.jpgから画像を変更したい - と、そのDIVをドラッグ止めます。

2. イメージの位置を左上側に変更したいと考えています。 5px上のDIV。

Example

CSS

div { 
     width:200px; 
     padding:10px; 
     border: 2px solid #fff; 
     cursor: pointer; 
     background: #ccc; 
} 

HTML

<img class="close" src="http://ynternet.sk/test2/close_1.jpg" /> 
    <div>Demo 1 Div </div> 
    <div>Demo 2 Div </div> 
    <div>Demo 3 Div </div> 

はJavaScript

$(document).ready(function() { 
    $('div').append($("img.close").css("opacity", "0")); 
    $('div').find('img.close').css("paddingLeft", "20px"); 
    $('div').mouseover(function() { 
     $(this).stop().animate({borderColor: "#aaa" }, "slow"); 
     $(this).find('img.close').css("opacity", "1"); 
    }).mouseout(function() { 
     $(this).stop().animate({borderColor: "#fff" }, "slow"); 
     $(this).find('img.close').css("opacity", "0"); 
    }) 
    $('div').draggable({ grid: [ 10,10 ] }); 
}); 

Answer 1

これを追加すると、ドラッグを止めて画像を変更します：

$('div img').click(function() { 
    $(this).attr('src', 'http://ynternet.sk/test2/close_2.jpg').parent().draggable("destroy"); 
});​ 

jsFiddle example。

「5px upper DIV」で＃2の意味を明確にしていません。

Answer 2

私はあなたが5pxの上位DIVによって何を意味するか、これは-5px

div img.close { 
position: absolute; 
float: left; 
top: -15px; 
right: 5px; 
} 

http://jsfiddle.net/mevbF/23/