1

I have a div and I am trying to drag it by a image inside the div. Below is my html

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

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

I have made the main div draggable but I want to drag with the help of image drag.png which is inside the maindiv. How to achieve this .Please help me on this..

sandeep.mishra
  • 825
  • 4
  • 19
  • 40
  • Change your selector, which I'm guessing is $("MainDiv") to $("MainDiv img"). And add further code to show what you have tried so far. – cyber_rookie Mar 18 '15 at 07:35

2 Answers2

5

You can use the handle-option of the draggable-function:

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

Demo

Reference

draggable - handle

empiric
  • 7,825
  • 7
  • 37
  • 48
  • I tried with below but is not working for me $("#MainDiv").draggable({ cursor: "move", handle: "img", addClasses: false, axis: "x y", appendTo: "body", snap: true, revert: 'invalid', start: function () { $(this).data("origPosition", $(this).position()); } }); – sandeep.mishra Mar 18 '15 at 07:42
  • @sandeep.mishra What is not working and what do you expect to happen ? see the [demo](https://jsfiddle.net/kn8zjp0L/) – empiric Mar 18 '15 at 08:00
  • Sorry empiric. Its working .Thanks a lot. I was trying with the droppable then draggable . Now its working when I reversed the order. – sandeep.mishra Mar 18 '15 at 10:02
0

JSFiddle

with jquery events $('#movable').on('mousedown',) possible without jquery UI also

Siva Kannan
  • 2,237
  • 4
  • 27
  • 39