"drag-and-drop-page-design"
Bootstrap 4.0.0 Snippet by mannack

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Page Designer</title> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> </head> <body class="container"> <br /> <div id="cf_source" class="panel panel-default"> <div class="panel-heading"> free fields (<a href="https://github.com/beratbilgin/drag-and-drop-page-design" target="_blank">all fields on github</a>) </div> <div class="panel-body source bg-success"> <div id="XX" title="XX" class="col-lg-3" cf> <div class="draggable col-lg-12 bg-primary"> <i class="fa fa-database"></i> XX </div> </div> <div id="YY" title="YY" class="col-lg-3" cf> <div class="draggable col-lg-12 bg-primary"> <i class="fa fa-database"></i> YY </div> </div> <div id="ZZ" title="ZZ" class="col-lg-3" cf> <div class="draggable col-lg-12 bg-primary"> <i class="fa fa-database"></i> ZZ </div> </div> </div> </div> <div class="well text-center tools" data-id="PageLayout"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" title="btn_color"> <i class="fa fa-table fa-2x"></i> </button> <ul class="dropdown-menu" role="menu"> <li style="height: 255px; width: 248px"> <div class="SizeChooser"> <table><tbody><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr></tbody></table> <div class="text-center"> <span class="colXrow">0</span> <span>x</span> <span class="colXrow">0</span> </div> </div> </li> </ul> </div> <button type="button" class="btn btn-sm btn-default merge" title="btn_merge"> <i class="fa fa-compress fa-2x"></i> </button> <button type="button" class="btn btn-sm btn-default btn-add-panel" title="btn_new_panel" style="display: none"> <i class="fa fa-plus fa-2x"></i> </button> </div> <div class="row" id="PageLayout"> </div> <!--K�lavuz panel--> <div class="panel panel-default hidden"> <div class="panel-heading tools"> <span><button class="btn btn-xs contenteditable"><i class="fa fa-edit" style="cursor: pointer"></i></button> <span contenteditable="false">New panel</span></span> <div class="pull-right"> <!--<a class="btn btn-xs btn-default move-cursor"><i class="fa fa-arrows"></i></a>--> <button type="button" class="btn btn-xs btn-default panel-toggle" title="btn_toggle"> <i class="fa fa-caret-down"></i> </button> <div class="btn-group"> <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" title="btn_color"> <i class="fa fa-eye"></i> </button> <ul class="dropdown-menu" role="menu"> <li data-color="default"> <button class="btn btn-block"> </button> </li> <li data-color="danger"> <button class="btn btn-danger btn-block"> </button> </li> <li data-color="success"> <button class="btn btn-success btn-block"> </button> </li> <li data-color="info"> <button class="btn btn-info btn-block"> </button> </li> <li data-color="warning"> <button class="btn btn-warning btn-block"> </button> </li> <li data-color="primary"> <button class="btn btn-primary btn-block"> </button> </li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" title="btn_color"> <i class="fa fa-table"></i> </button> <ul class="dropdown-menu" role="menu"> <li style="height: 255px; width: 248px"> <div class="SizeChooser"> <table><tbody><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr><tr><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td><td><button class="btn btn-xs"></button></td></tr></tbody></table> <div class="text-center"> <span class="colXrow">0</span> <span>x</span> <span class="colXrow">0</span> </div> </div> </li> </ul> </div> <button type="button" class="btn btn-xs btn-default merge" title="btn_merge"> <i class="fa fa-compress"></i> </button> </div> </div> <div class="panel-body"> <table class="table-panel table table-bordered"></table> </div> </div> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> </body> </html>
.table-layout tr td { /*border: 1px dashed #ddd !important;*/ padding: 15px; } .table-panel tr td { border: 2px dashed #eee !important; padding: 15px; } [contenteditable="true"]:active, [contenteditable="true"]:focus { padding: 5px 15px; font-size: 15px; line-height: 1.42857; color: #2C3E50; background-color: #FFF; background-image: none; border: 1px solid #DCE4EC; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; } [contenteditable="true"]:hover { outline: 2px dashed #0090D2; } .SizeChooser { margin: 5px 10px; position: relative; text-align: center; } .SizeChooser table { border-collapse: separate; border-spacing: 3px; } .SizeChooser td { cursor: pointer; height: 10px; min-width: 10px; line-height: 10px; /*border: 1px solid #CCC !important;*/ padding: 0 !important; } .SizeChooser td button { height: 12px!important; width: 10px!important; } .SizeChooser-hover { background-color: red; } .SizeChooser-selected { border: 1px #333 solid !important; } .SizeChooser input { width: 40px; } .ui-selecting { background: #FECA40; } .ui-selected { background: #F39814; color: white; } td.empty { padding: 15px !important; } .draggable { cursor: pointer; margin-right: 10px; margin-top: 5px; }
function createGuid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); } var sections = [ { Id: 1, Name: 'Section-1', RowOrder: 1, Colspan: 1, Rowspan: 1, Color: 'panel-success', RowCount: 2, Fields: [ { FieldId: 1, Name: 'name', RowOrder: 1, Colspan: 1, Rowspan: 1 }, { FieldId: 2, Name: 'surname', RowOrder: 1, Colspan: 1, Rowspan: 1 }, { FieldId: 3, Name: 'city', RowOrder: 2, Colspan: 2, Rowspan: 1 }] }, { Id: 2, Name: 'Section-2', RowOrder: 1, Colspan: 1, Rowspan: 1, Color: 'panel-info', RowCount: 2, Fields: [ { FieldId: 1, Name: 'name', RowOrder: 1, Colspan: 1, Rowspan: 1 }, { FieldId: 1, Name: 'surname', RowOrder: 2, Colspan: 1, Rowspan: 1 }] }, { Id: 3, Name: 'Section-3', RowOrder: 2, Colspan: 2, Rowspan: 1, Color: 'panel-danger', RowCount: 2, Fields: [ { FieldId: 1, Name: 'name', RowOrder: 1, Colspan: 1, Rowspan: 1 }, { FieldId: 2, Name: 'surname', RowOrder: 1, Colspan: 1, Rowspan: 1 }, { FieldId: 3, Name: 'email', RowOrder: 1, Colspan: 1, Rowspan: 1 }, { FieldId: 4, Name: 'city', RowOrder: 2, Colspan: 2, Rowspan: 1 }, { FieldId: 5, Name: 'county', RowOrder: 2, Colspan: 1, Rowspan: 1 }] } ]; var layout = { Id: 1, RowCount: 2, Sections: sections }; //layout = []; $(function () { var table = $('<table class="table table-bordered table-layout" />'); for (var i = 0; i < layout.RowCount; i++) { var tr = $('<tr/>'); $.each(layout.Sections, function () { if (this.RowOrder == i + 1) { var panel = $('.panel.hidden').clone() .removeClass('hidden') .addClass(this.Color); panel.find('.panel-heading span [contenteditable]').attr('data-name', this.Name).html(this.Name); if (this.Fields.length > 0) { for (var j = 0; j < this.RowCount; j++) { var pTr = $('<tr/>'); $.each(this.Fields, function () { if (this.RowOrder == j + 1) { var item = $('<div/>', { id: this.FieldId, title: this.Name, 'class': 'col-lg-12', cf:'' }) .append($('<div/>', { 'class': 'draggable col-lg-12 bg-primary' }) .append($('<i/>', { 'class': 'fa fa-database' })).append(' ' + this.Name)), td = $('<td/>', { colspan: this.Colspan, rowspan: this.Rowspan }).append(item); pTr.append(td); } }); var uniqId = createGuid(); panel.find('.panel-body').attr('id', uniqId); // benzersiz id panel.find('.tools').attr('data-id', uniqId); // benzersiz id panel.find('.panel-body table').append(pTr); } } tr.append($('<td/>', { colspan: this.Colspan, rowspan: this.Rowspan }).append(panel)); } }); table.append(tr); } $("#PageLayout").append(table); }); function draggableInit() { $('.panel-body td, .panel-body.source').sortable({ handle: '.draggable', connectWith: '.panel-body td, .panel-body.source', receive: function (event, ui) { var dragItemId = ui.item.attr('id'), sourceZone = ui.sender, draggedItem = ui.item, sourceId = sourceZone.closest('.panel').attr('id'), targetId = draggedItem.closest('.panel').attr('id'); draggedItem.removeClass().addClass('col-lg-12'); sourceZone.removeClass('ui-selected').addClass('empty'); if (targetId == 'cf_source') { draggedItem.removeClass().addClass('col-lg-3'); } else { draggedItem.parent().removeClass(); if (draggedItem.parent().children('div').length > 1) { if (sourceId != 'cf_source') sourceZone.removeClass(); else draggedItem.removeClass().addClass('col-lg-3'); sourceZone.append(draggedItem) } } selectableInit(); eventChangeData(); }, update: function (event, ui) { eventChangeData(); } }).disableSelection(); } //only empty cell selectable function selectableInit() { $('table.table-layout, table.table-panel').selectable({ filter: "td.empty", autoRefresh: true, selecting: function (event, ui) { var td = $(ui.selecting); //if (td.closest('table').hasClass('table-layout')) { // console.log('table-layout'); //} else { // console.log('table-panel'); //} }, stop: function (event, ui) { $(event.target).find(':not(.empty)').removeClass('ui-selected'); enableAddPanelButton($(event.target)); selectableInit(); } }); } function enableAddPanelButton(table) { if (table.find('.ui-selected').length == 1) { $('.btn-add-panel').show(); } else { $('.btn-add-panel').hide(); } } // Panel color setting $('body').on('click', '[data-color]', function () { var panel = $(this).closest('.panel'); var color = $(this).data('color'); panel.removeClass().addClass('panel').addClass('panel-' + color).attr('data-panelcolor', color); eventChangeData(); }); // Panel slide toggle effect $('body').on('click', '.panel-toggle', function () { var panelBlock = $(this).closest('.panel').children('.panel-body'); panelBlock.slideToggle(); }); //contenteditable $('body').on('click', '.contenteditable', function () { var span = $(this).closest('span'); var contentEditable = span.children('[contenteditable]'); contentEditable.attr('contenteditable', true).focus(); contentEditable.blur(function () { $(this).attr('contenteditable', false); }); }); $('body').on('keydown', '[contenteditable="true"]', function (e) { var item = $(this); if (e.keyCode === 27) { item.html(item.data('name')); item.blur(); return false; } else { eventChangeData(); } if (e.keyCode === 13) { item.blur(); return false; } }); function eventChangeData() { // data deðiþikliði oldu } function tableSizer() { var sizeChooser = $('.SizeChooser'); sizeChooser.each(function () { var trs = $(this).find('table tr'), tds = $(this).find('table td'), buttons = $(this).find('table td button'); trs.each(function (i) { var $tr = $(this); $tr.attr('data-index', i + 1); $tr.find('td').each(function (j) { $(this).attr('data-index', j + 1); }); }); tds.mouseover(function () { var trIndex = $(this).closest('tr').data('index'), tdIndex = $(this).data('index'); var colXrow = $(this).closest('.SizeChooser').find('.colXrow'); colXrow.eq(0).html(trIndex); colXrow.eq(1).html(tdIndex); buttons.removeClass('btn-info'); buttons.each(function () { var $button = $(this); if ($button.closest('tr').data('index') < trIndex + 1 && $button.parent().data('index') < tdIndex + 1) { $button.addClass('btn-info'); } }); }); }); } $(function () { //table generator $('body').on('click', 'td[data-index] button', function () { var trIndex = $(this).closest('tr').data('index'), tdIndex = $(this).parent().data('index'), tableId = '#' + $(this).closest('.tools').data('id'), table = $(tableId + ' > table'), trs = $(tableId + ' > table > tbody > tr'), trOrder, tdMaxCount = 0, newTrCount = (trIndex - trs.length), newTdCount, isDeletable = null; trs.each(function () { var $tr = $(this), $tdLen = $tr.children('td').length; if ($tdLen > tdMaxCount) tdMaxCount = $tdLen; }); newTdCount = (tdIndex - tdMaxCount); trs.each(function () { var $tr = $(this); for (var j = 0; j < newTdCount; j++) $tr.append($('<td/>', { colspan: 1, rowspan: 1, 'class': 'empty' })); //seçim dýþý kalan td siler if (newTdCount < 0) for (i = 0; i < Math.abs(newTdCount) ; i++) { var last = $tr.find('td').last(); last.find('div[cf]').clone().removeClass().addClass('col-lg-3').appendTo('#cf_source .panel-body'); last.remove(); } }); tdMaxCount += newTdCount; // yeni tr ler ekler for (trOrder = 0; trOrder < newTrCount ; trOrder++) { var tr = $('<tr/>'); for (var i = 0; i < tdMaxCount; i++) tr.append($('<td/>', { colspan: 1, rowspan: 1, 'class': 'empty' })); table.append(tr); } //seçim dýþý kalan tr siler if (newTrCount < 0) for (trOrder = 0; trOrder < Math.abs(newTrCount) ; trOrder++) { var last = $(tableId + ' > table > tbody > tr').last(); last.find('div[cf]').clone().removeClass().addClass('col-lg-3').appendTo('#cf_source .panel-body'); last.remove(); } draggableInit(); eventChangeData(); }); // seçili hüçrelerin merge edilmesi $('body').on('click', '.tools .merge', function () { var containerId = '#' + $(this).closest('.tools').data('id'), table = $(containerId + ' > table > tbody'), selectedSelector = containerId + ' > table > tbody > tr .ui-selected', cs = 0, rs = 1; table.find('tr').each(function () { var $tr = $(this), selecteds = $tr.find('.ui-selected'); cs = 0; selecteds.each(function () { cs += parseInt($(this).attr('colspan')); var newRs = parseInt($(this).attr('rowspan')); if (newRs > rs) rs = newRs; }); selecteds.last().after(($('<td/>', { colspan: cs, rowspan: rs, 'class': 'empty ui-selected' }))); selecteds.remove(); }); rs = 0, cs = 1; $(selectedSelector).each(function () { rs += parseInt($(this).attr('rowspan')); var newCs = parseInt($(this).attr('colspan')); if (newCs > cs) cs = newCs; }); $(selectedSelector).each(function (i) { var $elem = $(this); if (i == 0) { $elem.attr('rowspan', rs).attr('colspan', cs); } else { $elem.remove(); } }); draggableInit(); eventChangeData(); enableAddPanelButton(table); }); }); $(function () { draggableInit(); selectableInit(); tableSizer(); $('.btn-add-panel').click(function () { var selected = $('#PageLayout .ui-selected'); if (selected.length == 1) { var cloned = $('.panel.hidden').clone(); var uniq = createGuid(); cloned.find('.panel-body').attr('id', uniq); // benzersiz id cloned.find('.tools').attr('data-id', uniq); // benzersiz id selected.append(cloned.removeClass('hidden')).removeClass(); selectableInit(); tableSizer(); } }); });

Related: See More


Questions / Comments: