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

Question

我有可拖动的 DIV。在这些 DIV 中附加了一个图像。当鼠标悬停在 DIV's 上opacity时，图像的 将更改为1。当鼠标离开时，图像变得 opacity 0。

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

2. 我想将图像的位置更改为左侧 + 顶部。5px 上 DIV。

例子

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 示例。

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

Answer 2

我想这可能会解决 -5px

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

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