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

【问题标题】：Add image button in draggable DIV & toggle image source on click在可拖动的 DIV 中添加图像按钮并在单击时切换图像源
【发布时间】：2012-04-10 16:02:41
【问题描述】：

我有可拖动的 DIV。在这些 DIV 中附加了一个图像。当鼠标移到 DIV 上时，图像的opacity 变为1。当鼠标离开时，图像变得不透明0。

单击时我想将图像从 close_1.jpg 更改为图像 close_2.jpg - 并停止拖动该 DIV。
我想将图像的位置更改为左侧 + 顶部。 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 ] });
});

【问题讨论】：

示例 > jsfiddle.net/ynternet/mevbF/18
5px 上 DIV 是什么意思？
@Patrik - 样式声明如何成为这个问题的可接受答案？
@j08691 - 在我的最后一个答案中 - 有最终解决方案和示例 jsfiddle.net/ynternet/nfRjk/6。一切正常：]

标签： jquery html css position draggable

【解决方案1】：

添加此项将停止拖动并更改图像：

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

jsFiddle example.

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

【讨论】：

谢谢，它工作正常，但是...我想通过鼠标单击将其转回，并更改 IMG。 :]

【解决方案2】：

我想这可能会解决 -5px

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

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

【讨论】：