If you have a box (div) and a dragging icon (a anchor) on it, and you want to drag the box by clicking on the icon you just have to make the box draggable and set the handle of the drag to the icon.
Here it is, for:
1 2 3 | <div id="example"> <a id="drag_button" style="cursor:pointer;cursor:hand;">Drag</a> </div> |
Just use:
$('example').makeDraggable({handle:$('drag_button')});
Notes on IE:
The drag button element “<a>” can’t take href=”#” and can’t contain an image, as it will make it draggable by windows and will not work as supposed.
If you require to insert an image into it then use it as a background image for the drag button element, and set the element’s height and width according to the image for proper appearance:
1 2 3 4 5 | <p id="example"> <div id="example"> <div id="drag_button" style="background:url(img_location.png) no-repeat;width:15px;height:15px;cursor:pointer;cursor:hand;"> </div> </div> |