jquery-ui/demos/functional/templates/ui.sortable.html

<script type="text/javascript">

	var model = {

		onRenderEnd: function() {

			$.ui.disableSelection($('#sortable-ex').get(0));

		},

		renderAt: '#containerDemo',

		title: 'Sortable Demos',

		demos: [

			{

				title: 'Sortable',
				desc: 'With few lines of code you could have sortable elements. You can try more options on the fly!',
				html: { url: 'templates/ui.sortable.ex1.html' },
				destroy: '$("#selectedUsers").sortable("destroy");',
				options: [
					{
						desc: 'Make a simple sortable list',
						source:
							'$("#selectedUsers").sortable({ connectWith: ["#userList"] }); ' +
							'$("#userList").sortable({ connectWith: ["#selectedUsers"] });'
					}
				]
			},

			{
				title: 'Sortable',
				desc: 'Floating, with defined placeholder class',
				html: { url: 'templates/ui.sortable.ex3.html' },
				destroy: '$("#placeholderSortable").sortable("destroy");',
				options: [
					{
						desc: 'Floating, with defined placeholder class',
						source: '$("#placeholderSortable").sortable({ placeholder: "ui-selected", forcePlaceholderSize: true, revert: true });'
					}
				]
			}

		]
	};

	$(function(){

		uiRenderDemo(model);

	});

</script>