[jQuery] Sortable Lists
[jQuery] Sortable Lists
I am attempting to build a forms page, however using some sample code the
page is draggable
After using a simple jqeury statement to add to this form, nothing is
draggable/sortable. However before it was.
Is there another way of doing this, or am I doing something wrong. I have
pasted my javascript genereated draggable div into the html and it is
draggable so its something to do with jquery not posting to the dom fully,
err i dont really know. Below is the code I am using.
------------------------------------------------------
<html>
<title>Forms</title>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="java.js"></script>
</head>
<div id="form">
<div id="sort1" class="groupWrapper">
<div id="AddInput" onclick="test()">Add Input</div>
<div id="newsFeeder" class="groupItem">
<div class="itemHeader">Feeds # [-] </div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<div id="news" class="groupItem">
<div class="itemHeader">News # [-] </div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
------------------------------------------------------------
function test()
{
var name=prompt("Name of input box?");
var label=prompt("Label of input box?");
$('#form').html($('#form').html() + '<div id="'+name+'"
class="groupItem"><div class="itemHeader"><label>'+label+'</label> # [-]
</div><div class="itemContent"><input type="text" name=' + name
+'></div></div>');
}
$(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;
};
--
View this message in context: http://www.nabble.com/Sortable-Lists-tf4069907s15494.html#a11565721
Sent from the JQuery mailing list archive at Nabble.com.