Beste,
Voor het admin paneel van een site ben ik bezig om bepaalde onderdelen sortable te maken (dat je ze makkelijk en snel kan sorteren).
Bij de sortable heb ik een table gemaakt (zodat ik geen li hoef te gebruiken en dat vindt ik gewoon makkelijker werken). Nu is het probleem dat ik de border-spacing in de CSS op 2px heb staan en als ik sommige rijen verplaats word de border-spacing dubbel zo groot.
Ik heb al geprobeerd op bijna elke plek in de jQuery de border-spacing weer te updaten maar niets helpt. Alleen als ik 0px instel werkt het (dan kan er niks verdubbeld worden, 0+0=0).
Hoe kan ik dit het beste oplossen? De HTML/JS code die ik voor dit onderdeel heb is:
PHP
{literal}
<script type="text/javascript">
$(function() {
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
$(this).css("borderSpacing", "2px");
});
return ui;
};
$(".sortable tbody.content").sortable({
cursor: 'hand',
connectWith: '.sortable tbody.content',
helper: fixHelper,
update: function(event, ui){
$.ajax({
type: "POST",
url: "https://rapifia.nl/verwerking/volgorde_dom.php",
data: "newpos="+$(this).sortable('toArray').toString()+"&rij="+$(this).attr("alt"),
success: function(msg){
if(msg != 1){
alert( "Fout opgetreden: " + msg );
}
$(this).css("cursor", "move");
}
});
},
sort: function(event, ui){
$(this).css("cursor", "hand");
$(".bs").css("borderSpacing", "2px");
}
});
$(".sortable tbody.content").disableSelection();
});
</script>
{/literal}
<div class="box_c">
<h2>Wijzig volgorde van domeinnamen</h2>
<div class="box_c_text">
Hieronder kan je de volgorde van de domeinnamen aanpassen. Dit kan je doen door ze te slepen naar een andere positie.<br />
De twee kolommen staan precies zo op de registratie pagina.<br />
<br />
<table colspan="1">
<tr>
<td valign="top" style="padding-right: 20px;">
<table class="sortable" id="sortable1" width="375px" style="border-spacing: 2px;">
<tr>
<td width="16px"></td>
<td class="lbHeader" width="70px" colspan="2"><b>Extensie</b></td>
<td class="lbHeader" width="60px"><b>Kosten</b></td>
<td class="lbHeader" width="90px"><b>Populair</b></td>
<td class="lbHeader" width="100px"><b>Aantal</b></td>
</tr>
<tbody class="content" alt="1">
{ foreach value=dom from=$doms1 }
<tr id="{$dom.id}" class="bs" style="cursor: move;" width="550px" height="40px">
<td class="lb" style="text-align: center;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
<td class="lb" width="20px"><img src="template/images/domeinen/{$dom.ext2}.png" alt="{$dom.ext}" title="{$dom.ext}" width="20" border="0" /></td>
<td class="lb">{$dom.ext}</td>
<td class="lb" style="text-align: center;">€{$dom.kosten}</td>
<td class="lb" width="50px" style="text-align: center">{ if $dom.populair == 1 }<img src="template/images/done.png" alt="Ja" title="Ja" border="0" />{ else }<img src="template/images/undone.png" alt="Nee" title="Nee" border="0" />{ /if }</td>
<td class="lb" style="text-align: center;">{$dom.domreg} actief</td>
</tr>
{ /foreach }
</tbody>
</table>
</td>
<td valign="top">
<table class="sortable" id="sortable2" width="375px" style="border-spacing: 2px;">
<tr>
<td width="16px"></td>
<td class="lbHeader" width="70px" colspan="2"><b>Extensie</b></td>
<td class="lbHeader" width="60px"><b>Kosten</b></td>
<td class="lbHeader" width="90px"><b>Populair</b></td>
<td class="lbHeader" width="100px"><b>Aantal</b></td>
</tr>
<tbody class="content" alt="2">
{ foreach value=dom from=$doms2 }
<tr id="{$dom.id}" style="cursor: move;" width="550px" height="40px">
<td class="lb" style="text-align: center;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
<td class="lb" width="20px"><img src="template/images/domeinen/{$dom.ext2}.png" alt="{$dom.ext}" title="{$dom.ext}" width="20" border="0" /></td>
<td class="lb">{$dom.ext}</td>
<td class="lb" style="text-align: center;">€{$dom.kosten}</td>
<td class="lb" wudth="50px" style="text-align: center">{ if $dom.populair == 1 }<img src="template/images/done.png" alt="Ja" title="Ja" border="0" />{ else }<img src="template/images/undone.png" alt="Nee" title="Nee" border="0" />{ /if }</td>
<td class="lb" style="text-align: center;">{$dom.domreg} actief</td>
</tr>
{ /foreach }
</tbody>
</table>
</td>
</tr>
</table>
<br />
</div>
</div>Alvast bedankt.