1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
---|
2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
---|
3 | <head> |
---|
4 | <title>jQuery UI sortable containment parent first/last bug</title> |
---|
5 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> |
---|
6 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> |
---|
7 | <style type="text/css">#sortable{width:250px;padding:2px;border:1px solid;}#sortable>div{border:1px solid;margin:2px;}</style> |
---|
8 | <script type="text/jscript">$(function () { $("#sortable").sortable({ containment: 'parent' }); });</script> |
---|
9 | </head> |
---|
10 | <body> |
---|
11 | Try to drag it by the red area, it won't reorder. Drag it by green and it works.<br /><br /> |
---|
12 | <div id="sortable"> |
---|
13 | <div> |
---|
14 | <div style="background-color: Red;"> </div> |
---|
15 | <div style="background-color: Green;"> </div> |
---|
16 | </div> |
---|
17 | <div> |
---|
18 | <div style="background-color: Green;"> </div> |
---|
19 | <div style="background-color: Red;"> </div> |
---|
20 | </div> |
---|
21 | </div> |
---|
22 | </body> |
---|
23 | </html> |
---|