Drag'n'drop help
Drag'n'drop help
I have made a drag and drop list with some function.
Small eks.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Drag'n'Drop</title>
<STYLE type=text/css>
#drag { list-style-type: none; margin: 0; padding: 0; width: 60%;background: Silver;}
#drag li { margin: 3px 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;background: ButtonFace; }
</STYLE>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#drag").sortable(); // Make all LI under UL sortabled
$("#drag").disableSelection();
$("#addLI").click(function () {
var antal = $("#drag li").length;
antal++;
$("#drag").append("<li id=" + antal + ">" + antal + "</li>");
return false;
});
});
</script>
</head>
<body>
<a href="#" id="addLI">Add a new line</a>
<ul id="drag">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</body>
</html>
Now for my question.
How do I make is so a LI element is not drag abled ??
Also the element have to stay in place, meaning if I am to lock nr 2 and I drag nr 1 to pos 3 place, nr 2 stay in place and don't move up.