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
$(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
<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