Vote count:
1
I've got a simple list-maker using jQuery, but would like to make the created list sortable. I've tried applying the .sortable() function to various elements at various stages in the code, but it either does not work or breaks the code that comes after it. I assume this has something to do with the function execution order, which I know little about - any links to tutorials on that would also be appreciated. Code below and on jsfiddle at http://ift.tt/1vghDbF.
JS:
$(document).ready(myEnter);
function myEnter(){
$("input[name='checkListItem']").focus();
$("input[name='checkListItem']").keydown(function( key ) {
if ( key.which == 13 ) {
event.preventDefault();
myAdd();
}
});
$('.mainlist').on('click', '.item', myMove);
$('.checkedlist').on('click', '.item', myRemove);
$(document).click(function() {$("input[name='checkListItem']").focus();});
}
function myRemove(){
$(this).remove();
$("input[name='checkListItem']").focus();
}
function myMove(){
$('.checkedlist').append($(this));
$("input[name='checkListItem']").focus();
}
function myAdd(){
var toAdd = $('input[name=checkListItem]').val();
$('.mainlist').append('<li class="item">' + toAdd + '</li>');
$("form[name='checkListForm']").find("input[name=checkListItem], textarea").val("");
$("input[name='checkListItem']").focus();
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>//Testing grounds</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="http://ift.tt/183v7Lz"></script>
<script type="text/javascript" src="basiclist.js"></script>
</head>
<body>
<div class="center">
<h3>Testing grounds</h3>
<form name="checkListForm" id="listAddForm">
<input type="text" name="checkListItem"/>
</form>
</div>
<div class="center"><ol class="mainlist"><h3>My list</h3></ol></div>
<div class="center"><ol class="checkedlist"><h3>Checked off</h3></ol></div>
</body>
</html>
asked 2 mins ago
Aucun commentaire:
Enregistrer un commentaire