Question

I have draggable DIV’s. An image is appended in these DIV’s. When mouse is over DIV’ s, the opacity of the image is changed to 1. When mouse is out, image gets opacity 0.

1. On Click I want to change image from close_1.jpg to image close_2.jpg – and stop dragging that DIV.

2. I want to change position of the image to the left + top side. 5px upper 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

Adding this will stop the drag and change the image:

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

jsFiddle example.

I’m just not clear on what you meant in #2 by “5px upper DIV”.