jquery - 在可拖动的 DIV 中添加图像按钮并在单击时切换图像源

Question

我有可拖动的 DIV。这些 DIV 中附加了一个图像。当鼠标悬停在 DIV 上时，图像的不透明度 更改为1。当鼠标离开时，图像不透明度变为 0。

1. 单击时我想将图像从 close_1.jpg 更改为图像 close_2.jpg - 并停止拖动该 DIV。

2. 我想将图像的位置更改为左侧 + 顶部。 5 像素上部 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 .

我只是不清楚您在 #2 中所说的“5px upper DIV”是什么意思。