Demo of Dragging elements with handle option in JQuery

<P> <H4> <B>



Dragging will start only from P ( default ), H4 or B element. You can set one of them by using buttons. By default <P> is set.

STYLE

<style>
.drg_box{ 
position: relative;
FONT-SIZE: 14px;
font-family: Verdana;
padding:5px;
width:220px;
height:130px;
background-color: #ffff00;
border: 2px solid red;
border-radius: 5px;
}
</style>

HTML

<div id="draggable" class='drg_box'>
  <p>Drag using me <P></p>
  <h4>Drag using me <H4></h4>
  <b>Drag using me <B></b>
</div>
<br><br>
<button  id=b1 class=my_button><P></button> <button  id=b2 class=my_button><H4></button> 
<button  id=b3 class=my_button><B></button> 
<br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#draggable" ).draggable({
handle:'p'
});
//////
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "handle", "p" );
var handle = $( ".drg_box" ).draggable( "option", "handle" );
$('#d1').html("handle : " + handle);
})
///////////
//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "handle", "h4" );
var handle = $( ".drg_box" ).draggable( "option", "handle" );
$('#d1').html("handle : " + handle);
})
///////////
//////
$("#b3").click(function(){
$( ".drg_box" ).draggable( "option", "handle", "b" );
var handle = $( ".drg_box" ).draggable( "option", "handle" );
$('#d1').html("handle : " + handle);
})
///////////
var handle = $( ".drg_box" ).draggable( "option", "handle" );
$('#d1').html("handle : " + handle);
///////////
})
</script>