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