Hello
I here it is if someone needs it.
Template:
<script type="text/javascript">
window.addEvent('domready', function(){
new Sortables($('<?php echo $jSeblod->your_field_x[0]->name; ?>'), {
'handles': $('<?php echo $jSeblod->your_field_x[0]->name; ?>').getElements('img.button-drag'),
});
});
</script>
<ul id="<?php echo $jSeblod->your_field_x[0]->name; ?>" class="collection-elem-repeatable">
<?php
$n8 = count ( $jSeblod->your_field_x );
for ( $i8 = 0; $i8 < $n8; $i8++ ) {?>
<li class="collection-elem-repeatable">
<div class="collection-elem-wrap">
<div class="collection-elem-button" style="width:125px;">
<img class="button-del" onclick="CCK_ELEM_Remove(this);" src="<?php echo $root; ?>/media/jseblod/_icons/del-default.gif" alt="Del" />
<?php if ( @$jSeblod->your_field_x[0]->repeatable ) { ?>
<img class="button-add" onclick="CCK_ELEM_Copy(this, <?php echo $jSeblod->your_field_x[0]->maximum; ?>);" src="<?php echo $root; ?>/media/jseblod/_icons/add-default.gif" alt="Add" />
<?php } ?>
<?php if ( @$jSeblod->your_field_x[0]->draggable ) { ?>
<img class="button-drag" src="<?php echo $root; ?>/media/jseblod/_icons/drag-default.gif" alt="Drag" />
<?php } ?>
</div>
<div class="collection-elem-form">
<?php echo $jSeblod->your_field_x[$i8]->form; ?>
</div>
</div>
</li>
<?php } ?>
</ul>
There must be also added css and javascript which can be found in params.php of default content form.
Javascript:
<script type="text/javascript">
function CCK_ELEM_Copy(el, maximum) {
var elem = $(el).getParent().getParent().getParent();
var list = elem.getParent();
var length = ( list.getChildren().length );
if ( length < maximum ) {
var newElem = elem.clone();
var listname = list.getProperty( 'id' );
var num = eval("elemmax_"+listname);
eval("elemmax_"+listname+"++");
newElem.setHTML( newElem.innerHTML.replace(/-\d-wysiwyg/g,"-"+num+"-wysiwyg") );
newElem.injectAfter(elem);
new Sortables($(listname), {
'handles': $(listname).getElements('img.button-drag'),
});
}
}
function CCK_ELEM_Remove(el) {
var elem = $(el).getParent().getParent().getParent();
elem.remove();
}
</script>
CSS:
/* GROUPS */
ul.collection-group-repeatable {
margin: 0;
padding: 0;
}
ul.collection-group-repeatable {
list-style: none;
margin: 0;
}
div.collection-group-wrap {
overflow: hidden;
}
div.collection-group-form {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 0px;
float: left;
}
div.collection-group-button {
float: left;
padding-top: 3px;
}
/* ELEMENTS */
ul.collection-elem-repeatable {
margin: 0;
padding: 0;
}
li.collection-elem-repeatable {
list-style: none;
margin: 0;
}
div.collection-elem-wrap {
overflow: hidden;
}
div.collection-elem-form {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 0px;
float: left;
}
div.collection-elem-button {
float: left;
padding-top: 3px;
}
/* BUTTONS */
img.button-del {
cursor: pointer;
}
img.button-add {
cursor: pointer;
}
img.button-drag {
cursor: move;
}
It works for me....
Michal