Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
- <style>
- * {
- box-sizing: border-box;
- outline: 0 !important;
- }
- body {
- margin: 0;
- padding: 0;
- }
- .container {
- width: 1000px;
- display: table;
- margin: 0 auto;
- padding: 20px;
- }
- .eachColumn {
- width: 300px;
- display: table;
- padding: 10px;
- background: #f5f5f5;
- float: left;
- margin-right: 20px;
- border-radius: 10px;
- min-height: 50px;
- }
- .columns {
- width: 100%;
- display: table;
- min-height: 50px;
- }
- .cards {
- width: 100%;
- display: table;
- padding: 10px;
- background: #ffffff;
- float: left;
- margin-bottom: 10px;
- border-radius: 10px;
- min-height: 50px;
- }
- .amieami {
- width: 100%;
- display: inline-block;
- padding: 10px;
- border: 1px dashed #777;
- float: left;
- margin-bottom: 10px;
- border-radius: 10px;
- min-height: 50px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="eachColumn">
- <div class="columns">
- <div class="cards">This is a card 1</div>
- <div class="cards">This is a card 2</div>
- <div class="cards">This is a card 3</div>
- </div>
- </div>
- <div class="eachColumn">
- <div class="columns">
- <div class="cards">This is a card 1</div>
- <div class="cards">This is a card 2</div>
- <div class="cards">This is a card 3</div>
- </div>
- </div>
- <div class="eachColumn">
- <div class="columns">
- <div class="cards">This is a card 1</div>
- <div class="cards">This is a card 2</div>
- <div class="cards">This is a card 3</div>
- </div>
- </div>
- </div>
- <script>
- $(function () {
- $(function () {
- $('.columns').sortable(
- {
- connectWith: ".columns",
- placeholder: 'amieami',
- receive: function (e, ui) {
- /*var status_id = $(ui.item).parent(".sortable").data("status-id");
- var task_id = $(ui.item).data("task-id");
- $.ajax({
- url: url + '?status_id=' + status_id + '&task_id='
- + task_id,
- success: function (response) {
- }
- });*/
- }
- }).disableSelection();
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement