JQuery Drag and Drop functionality not working

JQuery Drag and Drop functionality not working

I am attempting to build a page, however using some sample code the

page have drag and drop functionality.

After using a simple jqeury statement to add to this form, every thing working (drag and drop)properly.

Now my actual requirement is

I need to generate the controls dynamically. Whne I generated all controls from server side and put all the generated controls HTML snipet in <div id="sort1" class="groupWrapper"> its working fine but when I try to put same HTML snippet in the same DIV using JavaScript drag and drop functionality not working;

Is there another way of doing this, or am I doing something wrong.

Below is the code I am using.

 

Case when drag and drop functionality Not working.

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

html xmlns="http://www.w3.org/1999/xhtml">

<
head><head>
< meta http-equiv ="Content-Type" content ="text/html; charset=ISO-8859-1">
< title > Sortables demo - Interface plugin for jQuery </ title >
< script type ="text/javascript" src ="SopurtFile/jquery.js"></ script >
< script type ="text/javascript" src ="SopurtFile/interface.js"></ script >
< script language ="javascript" type ="text/javascript">

function hello() {

var str = '<div id="news" class="groupItem"><div style="-moz-user-select: none;" class="itemHeader">Email Address</div> <div class="itemContent">Email Address<font color="red">*</font><input name="txtEmailAddress" type="textfield"></div></div>';

var str1 = ' <div style="position: static;" id="shop" class="groupItem"><div style="-moz-user-select: none;" class="itemHeader">Last Name<a href="#" class="closeEl">[-]</a></div><div style="display: block; overflow: visible;" class="itemContent"> Last Name<input name="txtLastName" type="textfield"></div></div>';

var str2 = ' <div style="position: static; display: block; left: 352px; top: 194px;" id="newsFeeder" class="groupItem"><div style="-moz-user-select: none;" class="itemHeader"> First Name<a href="#" class="closeEl">[-]</a></div><div style="display: block; overflow: visible;" class="itemContent"> First Name <input name="txtFirstName" type="textfield"> </div> </div>';

document.getElementById(

'sort1').innerHTML = str + str1 + str2;

}

</script>
<style type="text/css" media="all">
html {
height : 100% ;
}

img

{

border: none;

}

body

{

background: #fff;

height: 100%;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

}

.groupWrapper

{

width: 32%;

float: left;

margin-right: 1%;

min-height: 400px;

}

.serializer

{

clear: both;

}

.groupItem

{

margin-bottom: 20px;

}

.groupItem .itemHeader

{

line-height: 28px;

background-color: #DAFF9F;

border-top: 2px solid #B5EF59;

color: #000;

padding: 0 10px;

cursor: move;

font-weight: bold;

font-size: 16px;

height: 28px;

position: relative;

}

.groupItem .itemHeader a

{

position: absolute;

right: 10px;

top: 0px;

font-weight: normal;

font-size: 11px;

text-decoration: none;

}

.sortHelper

{

border: 3px dashed #666;

width: auto !important;

}

.groupWrapper p

{

height: 1px;

overflow: hidden;

margin: 0;

padding: 0;

}

</style>

</

head>

</

head>

<

body onload="hello();">

<

div id="sort1" class="groupWrapper">

</div>

<script type="text/javascript">

$(document).ready(

function() {

$(

'a.closeEl').bind('click', toggleContent);

$(

'div.groupWrapper').Sortable(

{

accept:

'groupItem',

helperclass:

'sortHelper',

activeclass:

'sortableactive',

hoverclass:

'sortablehover',

handle:

'div.itemHeader',

tolerance:

'pointer',

onChange:

function(ser) {

},

onStart:

function() {

$.iAutoscroller.start(

this, document.getElementsByTagName('body'));

},

onStop:

function() {

$.iAutoscroller.stop();

}

}

);

}

);

var toggleContent = function(e) {

var targetContent = $('div.itemContent', this.parentNode.parentNode);

if (targetContent.css('display') == 'none') {

targetContent.slideDown(300);

$(

this).html('[-]');

}

else {

targetContent.slideUp(300);

$(

this).html('[+]');

}

return false;

};

function serialize(s) {

serial = $.SortSerialize(s);

alert(serial.hash);

};

</script>

<div class="serializer">

<a href="#" onclick="serialize(); return false;">serialize all lists</a> <a href="#"

onclick="serialize('sort1'); return false;">serialize list 1</a> <a href="#" onclick="serialize('sort2'); return false;">

serialize list 2

</a> <a href="#" onclick="serialize('sort3'); return false;">serialize

list 3

</a> <a href="#" onclick="serialize(['sort1', 'sort3']); return false;">serialize

lists 2 and 3

</a>

</div>

<script language="JavaScript" src="sort_files/track.js" type="text/javascript"></script>

</

body>

</

html>