jquery Ui sortable

jquery Ui sortable connected same

by Simplybj

HTML

<section id="connected">
		<h2>Connected Sortable Lists</h2>
		<div class="connected list">
			<div class="connected">Item 1</div>
			<div class="connected">Item 2</div>
			<div class="connected">Item 3</div>
			<div class="connected">Item 4</div>
			<div class="connected">Item 5</div>
		</div>
		<div class="connected list">
			<div class="connected">Item 1</div>
			<div class="connected">Item 2</div>
			<div class="connected">Item 3</div>
			<div class="connected">Item 4</div>
			<div class="connected">Item 5</div>
		</div>
	</section>

CSS

#connected {
			width: 440px;
			overflow: hidden;
			margin: auto;
		}
		
		.connected {
			float: left;
			width: 200px;
		}
    .connected div {
			list-style: none;
			border: 1px solid #CCC;
			background: #F6F6F6;
			font-family: "Tahoma";
			color: #1C94C4;
			margin: 5px;
			padding: 5px;
			height: 22px;
		}
		
		div.ui-sortable-placeholder {
			border: 1px dashed #CCC;
			background: none;
			float:left;
			width: 100%;
		}

JavaScript

$('.connected').sortable({
				connectWith: ".connected",
				 placeholder: "ui-state-active",
       			 hoverClass: "sfActivedroparea",
					change: function(event, ui){
					//alert('change');
				},
				   /*start: function(event, ui) {
					   alert('start');
				   },
				change: function(event, ui){
					alert('change');
				},
				beforeStop: function(event, ui){
					alert('beforeStop');
				},
				over: function(event, ui){
					alert('over');
				} */
			});