draggable by dynamic title

[catpaw]

hello all

I´m using for first time the draggable plugin and I need some help

I have a loop with draggable boxes but I want it can only drag by the title , which is through by the handle property

but as these boxes are created dynamically have no way to assign the property to every one, because the assignment of doing through a class all divs

Code:

$(function(){
var indicator = $('<div class="indicator">>></div>').appendTo('body');
$('.drag-item').draggable({
revert:true,
deltaX:0,
deltaY:0,
onDrag: function onDrag(e){
var d = e.data;
if (d.left < 0){d.left = 0}
if (d.top < 0){d.top = 0}
if (d.left + $(d.target).outerWidth() > $(d.parent).width()){
d.left = $(d.parent).width() - $(d.target).outerWidth();
}
if (d.top + $(d.target).outerHeight() > $(d.parent).height()){
d.top = $(d.parent).height() - $(d.target).outerHeight();
}
}
}).droppable({
onDragOver:function(e,source){
indicator.css({
display:'block',
left:$(this).offset().left-10,
top:$(this).offset().top+$(this).outerHeight()-5
});
},
onDragLeave:function(e,source){
indicator.hide();
},
onDrop:function(e,source){
//$(source).insertAfter(this);
$(source).insertBefore(this);
indicator.hide();
}
});
});

I have relied on the example of the demos

Now this is how I create the boxes inside the loop

Code:

<div class="easyui-panel" style="position:relative;overflow:hidden;width:auto;height:350px;padding:5px 2px;">
            <?php 
foreach($array as $item){
$name = explode("|",$item);
$indice = $name[0];
$titulo = $name[1];
?>
             <div id="<?php echo $indice; ?>" class="drag-item">
                 <div class="title-item"><?php echo $titulo; ?></div>
                </div>
             <?php
}
?>
        </div>

How I can add the handle with a different title for each item?

thanks