Search and Top Navigation
Ticket #5772: jQuerySortable.html
File jQuerySortable.html, 1.2 KB (added by meyerovb, June 26, 2010 06:32PM UTC)
<!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>
<title>jQuery UI sortable containment parent first/last bug</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">#sortable{width:250px;padding:2px;border:1px solid;}#sortable>div{border:1px solid;margin:2px;}</style>
<script type="text/jscript">$(function () { $("#sortable").sortable({ containment: 'parent' }); });</script>
</head>
<body>
Try to drag it by the red area, it won't reorder. Drag it by green and it works.<br /><br />
<div id="sortable">
<div>
<div style="background-color: Red;"> </div>
<div style="background-color: Green;"> </div>
</div>
<div>
<div style="background-color: Green;"> </div>
<div style="background-color: Red;"> </div>
</div>
</div>
</body>
</html>
Download in other formats:
Original Format
File jQuerySortable.html, 1.2 KB (added by meyerovb, June 26, 2010 06:32PM UTC)
<!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>
<title>jQuery UI sortable containment parent first/last bug</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">#sortable{width:250px;padding:2px;border:1px solid;}#sortable>div{border:1px solid;margin:2px;}</style>
<script type="text/jscript">$(function () { $("#sortable").sortable({ containment: 'parent' }); });</script>
</head>
<body>
Try to drag it by the red area, it won't reorder. Drag it by green and it works.<br /><br />
<div id="sortable">
<div>
<div style="background-color: Red;"> </div>
<div style="background-color: Green;"> </div>
</div>
<div>
<div style="background-color: Green;"> </div>
<div style="background-color: Red;"> </div>
</div>
</div>
</body>
</html>