Drag and drop using jquery


Create .html file

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript">
 // Example 1.1: A single sortable list
 $('#example-1-1 .sortable-list').sortable();
 // Example 1.2: Sortable and connectable lists
 $('#example-1-2 .sortable-list').sortable({
 connectWith: '#example-1-2 .sortable-list'
 // Example 1.3: Sortable and connectable lists with visual helper
 $('#example-1-3 .sortable-list').sortable({
 connectWith: '#example-1-3 .sortable-list',
 placeholder: 'placeholder',
 // Example 1.4: Sortable and connectable lists (within containment)
 $('#example-1-4 .sortable-list').sortable({
 connectWith: '#example-1-4 .sortable-list',
 containment: '#containment'

<div class="dhe-example-section" id="ex-1-2">
 <div class="dhe-example-section-header">
 <h3 class="dhe-h3 dhe-example-title">Example 1.2: Sortable and connectable lists</h3>
 <div class="dhe-example-description">Drag and drop items within and between lists.</div>
 <div class="dhe-example-section-content">
 <!-- BEGIN: XHTML for example 1.2 -->
 <div id="example-1-2">
 <div class="left"> 
 <div class="column left first">
 <ul class="sortable-list">
 <li class="sortable-item">Sortable item A</li>
 <li class="sortable-item">Sortable item B</li>
 <div class="column left">
 <ul class="sortable-list">
 <li class="sortable-item">Sortable item C</li>
 <li class="sortable-item">Sortable item D</li>
 <div class="clearer">&nbsp;</div>
 <div class="right">
 <div class="column right">
 <ul class="sortable-list">
 <li class="sortable-item">Sortable item E</li>
 <li class="sortable-item">Sortable item F</li>
 <div class="column right">
 <ul class="sortable-list">
 <li class="sortable-item">Sortable item G</li>
 <li class="sortable-item">Sortable item H</li>
 <div class="clearer">&nbsp;</div>
 <!-- END: XHTML for example 1.2 -->

Create .css file

	Stylesheet for examples by DevHeart.

	Article title:	jQuery: Customizable layout using drag n drop
	Example title:	1. Getting started with sortable lists
------------------------------------------------------------------- */

/* Floats */

.left {float: left; margin-bottom:10px;}
/*.right {float: right;}*/

.clear,.clearer {clear: both;}
.clearer {
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	Example specifics
------------------------------------------------------------------- */

/* Layout */

#center-wrapper {
	margin: 0 auto;
	width: 920px;

/* Columns */

/*.column {
	margin-left: 2%;
	width: 32%;
.column.first {margin-left: 0;}

/* Sortable items */

.sortable-list {
	background-color: #F93;
	list-style: none;
	margin: 0;
	min-height: 60px;
	padding: 10px;
.sortable-item {
	background-color: #FFF;
	border: 1px solid #000;
	cursor: move;
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
	padding: 20px 0;
	text-align: center; width:180px;
/* Containment area */
#containment {
	background-color: #FFA;
	height: 230px;
/* Item placeholder (visual helper) */
.placeholder {
	background-color: #BFB;
	border: 1px dashed #666;
	height: 58px;
	margin-bottom: 5px;
#example-1-2 > div.right > div:nth-child(2) {float: left;
margin-left: -19px;}
#example-1-2 > div.right > div:nth-child(1) > ul {width: 201px;float: left;}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s