HomePHP Tutorial #48 – Part 2 – Sortable Tables. Sortable Table Code:- pastebin.com MySQL Connect Code:- pastebin.com
January 27th, 2012
Posts Tagged ‘sortable’
PHP Tutorial #48 – Part 2 – Sortable Tables. Sortable Table Code:- pastebin.com MySQL Connect Code:- pastebin.com
Hi there,
I have been working with jquery-ui’s sortable demo for a while.
On looking closely, I found that it nudges the divs slightly.
Here’s an online demo : http://jsbin.com/ijusu3
Try moving the the center one to the left, then you can see the right ones nudging about 2 pixels to the left.
I would like to know why. This has been messing up the rest of my functionality.
PS: If jsbin doesnt show the code, here it is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.2.custom.min.js"></script>
<style type="text/css">
.container { width: 788px; height: 405px; }
.column { width: 78px; height:405px; display:table-cell; vertical-align:bottom;}
.portlet { width: 78px; height: 10px; display: block; position:relative; }
</style>
<script type="text/javascript">
$(function() {
$(".column").sortable({
connectWith: '.column',
helper:'original'
});
$(".portlet").addClass("ui-widget ui-widget-content ui-corner-all");
$(".column").disableSelection();
});
</script>
</head>
<body>
<div id="container" class="container">
<div id="col-0" class="column">
<div class="portlet" id="feeds">
<div class="portlet-content"></div>
</div>
<div class="portlet" id="news">
<div class="portlet-content"></div>
</div>
</div>
<div id="col-1" class="column">
<div class="portlet" id="shopping">
<div class="portlet-content"></div>
</div>
</div>
<div id="col-2" class="column">
<div class="portlet" id="links">
<div class="portlet-content"></div>
</div>
<div class="portlet" id="images">
<div class="portlet-content"></div>
</div>
</div>
</div>
</body>
</html>
September 27th, 2010
I’m using jQuery UI’s sortable lists to sort items in a todo list, and the reordering of the lists works like a charm.
I have several UL lists for each todo category, i.e. Design, Development, etc.
I want to be able to move an item from one category to another, and jQuery UI’s sortable lists plugin allows me to do this with the connectWith option parameter.
But I can’t seem to find how to update the database as well. The todo database table has a field for a reference to the category which is laying in it’s own table.
This is the current code:
$('.sortable').sortable({
axis: 'y',
opacity: .5,
cancel: '.no-tasks',
connectWith: '.sortable',
update: function(){
$.ajax({
type: 'POST',
url: basepath + 'task/sort_list',
data: $(this).sortable('serialize')
});
}
});
Do I need to add another value to the AJAX’s data parameter, or do the sortable plugin this for me in the serialize function?
March 22nd, 2010
