i trying create dashboard 5 sortable responsive grids in foundation. 4 grids have same widths , 1 has double width of other grids. grids have responsive , mobile friendly. have stack under 1 resolutions <= 768. tried using many libraries. had containment issues , padding/gutter issues , responsive issues.
the below code latest trial. has intermittent containment issues when sort along y axis , breaks when gutter between grids introduced. new foundation, sorting. please check below code , let me know how fix above 2 issues.
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>foundation | welcome</title> <link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.min.css" /> <style type="text/css"> .list { background-color: pink; font-size: 30px; text-align: center; cursor: pointer; font-family: geneva, arial, helvetica, sans-serif; border: 1px solid gray; } .listdbl { border: 1px solid #000; background-color: pink; font-size: 30px; text-align: center; cursor: pointer; font-family: geneva, arial, helvetica, sans-serif; border: 1px solid gray; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> </head> <body> <div id="sortable"> <div class="row display"> <div class="ui-state-default large-4 columns list">1</div> <div class="ui-state-default large-4 columns list">2</div> <div class="ui-state-default large-4 columns list">3</div> <div class="ui-state-default large-8 columns listdbl">4</div> <div class="ui-state-default large-4 columns list">5</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <script src="http://cdn.jsdelivr.net/foundation/3.2.2/javascripts/foundation.min.js"></script> <script> $(document).foundation(); $(function() { $(".row").sortable(); $(".row").disableselection(); }); </script> </body> </html> fiddle: http://jsfiddle.net/mbsa4/66/
ok works here fiddle.
you using foundation 3.2
http://cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.min.css use 5 or better version because column markup has changed
