Sortables - I'm Stuck :: JavaScript :: Discussion Forum :: Networks

Networks » Discussion Forum » JavaScript » Sortables - I'm Stuck

JavaScript is not enabled on your browser and in order to properly use Coder Profile JavaScript is required.
To view instructions on how to enable JavaScript on your browser click here.

Posted: 2.17 Years Ago

VBAssassin
United Kingdom

Contrib Level: 17
Total Posts: 5,718

Hi ya guys,

I have this code that i am working on adding to the Account Home Page on this site.

The code will allow you to reorganize the applications on your account home page. It works, but if you move all the boxes out of a column. There is no way of getting any of the boxes from the other columns, back in to the blank column. Nothing drags back in to it!

How the heck do you solve that "easily". I can think of tedious ways, but would rather not do that. Maybe a quick way would be to use one of the callback events and revert the drag if that item is the only one left in the column?

It uses scriptaculous by the way.

CODE:

Copy / Restore

<table width='100%' style='border:solid 1px #AAAAAA;background-color:#CCCCCC;' cellspacing='0' cellpadding='0'>
<tr>
<td width='33%' valign='top' style='padding-left:10px;padding-right:10px;'>
<div id='names1' style='position:relative;margin-top:10px;'>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fsdssssssfd</div>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fdsaas</div>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fds</div>
</div>
</td>
<td width='34%' valign='top'>
<div id='names2' style='position:relative;margin-top:10px;'>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fsdssssssfd</div>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fdsaas</div>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fds</div>
</div>
</td>
<td width='33%' valign='top' style='padding-left:10px;padding-right:10px;'>
<div id='names3' style='position:relative;margin-top:10px;'>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fsdssssssfd</div>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fdsaas</div>
<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fds</div>
</div>
</td>
</tr>
</table>
<script>
document.observe('dom:loaded', function () {
Sortable.create('names1', { tag: 'div', constraint: false, containment: ['names1', 'names2', 'names3'] });
Sortable.create('names2', { tag: 'div', constraint: false, containment: ['names1', 'names2', 'names3'] });
Sortable.create('names3', { tag: 'div', constraint: false, containment: ['names1', 'names2', 'names3'] });
});
</script>

Select what you want to copy and in doing so you will keep the formatting when pasting it.

<table width='100%' style='border:solid 1px #AAAAAA;background-color:#CCCCCC;' cellspacing='0' cellpadding='0'>
	<tr>
		<td width='33%' valign='top' style='padding-left:10px;padding-right:10px;'>
			<div id='names1' style='position:relative;margin-top:10px;'>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fsdssssssfd</div>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fdsaas</div>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fds</div>
			</div>
		</td>
		<td width='34%' valign='top'>
			<div id='names2' style='position:relative;margin-top:10px;'>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fsdssssssfd</div>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fdsaas</div>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fds</div>
			</div>
		</td>
		<td width='33%' valign='top' style='padding-left:10px;padding-right:10px;'>
			<div id='names3' style='position:relative;margin-top:10px;'>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fsdssssssfd</div>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fdsaas</div>
				<div style='width:100%;height:50px;background-color:#FFFFFF;border:solid 1px #AAAAAA;color:#EEEEEE;margin-bottom:10px;'>fds</div>
			</div>
		</td>
	</tr>
</table>
<script>
	document.observe('dom:loaded', function () {
		Sortable.create('names1', { tag: 'div', constraint: false, containment: ['names1', 'names2', 'names3'] });
		Sortable.create('names2', { tag: 'div', constraint: false, containment: ['names1', 'names2', 'names3'] });
		Sortable.create('names3', { tag: 'div', constraint: false, containment: ['names1', 'names2', 'names3'] });
	});
</script>

Kind regards,
Scott

Reply With Quote

Page 1 of 1