Как сделать div перетаскиваемым по изображению внутри

Question

У меня есть div, и я пытаюсь перетащить его по изображению внутри div. Ниже мой HTML

<div id="MainDiv"> 
    <img src="Images/Drag.png"/> 

<div>Test</div><div>Tes2</div> 
</div> 

Я сделал основной ДИВ перетаскиваться, но я хочу, чтобы перетащить с помощью drag.png изображения, который находится внутри maindiv. Как достичь этого .Please помочь мне в этом ..

Answer 1

Вы можете использовать handle -Option из перетаскиваемом-функции:

$("#MainDiv").draggable({ 
    handle: "img" 
}); 

Demo

Reference

draggable - handle

Answer 2

Для тех, кто не имеет nt использует jQuery UI library.

JSFiddle

HTML

<div id="movalbe"></div> 

CSS

#movable { 
    cursor: move; 
    width:70px; 
    height:70px; 
    background:black; 
    margin:2px; 
    float:left; 
} 
#movalbe:active { 
    background: grey; 
} 

JS

$('#movable').on('mousedown', function (e) { 
    $(this).addClass('active'); 
    var oTop = e.pageY - $('.active').offset().top; 
    var oLeft = e.pageX - $('.active').offset().left; 
    $(this).parents().on('mousemove', function (e) { 
     $('.active').offset({ 
      top: e.pageY - oTop, 
      left: e.pageX - oLeft 
     }); 
    }); 
    $(this).on('mouseup', function() { 
      $(this).removeClass('active'); 
    });  
    return false;  
});