Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Есть ли такая возможность (https://javascript.ru/forum/misc/72036-est-li-takaya-vozmozhnost.html)

Neon921 02.01.2018 17:40

Есть ли такая возможность
 
Доброго дня, у меня появился такой вопрос. Можно ли каким-то образом поделить страницу на 3 колонки (к примеру 1 сверху и 2 по бокам). И в колонках которые по бокам разместить обьекты, в которых расположен текст, после чего возможность перемещать эти обьекты из 1 колонки в другую.

рони 02.01.2018 18:06

Цитата:

Сообщение от Neon921
Можно ли каким-то образом поделить страницу на 3 колонки

читать про flex
Цитата:

Сообщение от Neon921
возможность перемещать

http://jqueryui.com/sortable/#connect-lists

рони 02.01.2018 18:31

sortable flex
 
Neon921,

flex 3 блока, две колонки и заголовок, перемещение блоков с текстом в в любой соседний.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body, html{
  width: 100%;
  height: 100%;
  margin: 0;
}
.block {
   width: 100%;height: 100%;
   display: flex;
   flex-wrap: wrap;

}
.block > div {
   height: 50%;
   transition: .8s;
   box-sizing: border-box;
}


.block > div:nth-child(1){ width: 100%;
  background-color: red;

}
.block > div:nth-child(2){ width: 50%;
  background-color: yellow;
}
.block > div:nth-child(3){ width: 50%;
  background-color: green;
}

.text{
  width: 100px;
  height: 50px;
  background-color:  rgba(255, 244, 148, 1);
  border: 4px solid rgba(139, 69, 19, 1);
  border-radius: 12px;
  text-align: center;
  line-height: 50px;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
   $( ".block >" ).sortable({
      connectWith: ".block >"
    }).disableSelection();
})
  </script>
</head>

<body>
<div class="block">
  <div></div>
  <div>
  <div class="text">test_01</div>
  <div class="text">test_02</div>
  <div class="text">test_03</div>
  <div class="text">test_04</div>
  <div class="text">test_05</div>
  </div>
  <div></div>
</div>



</body>
</html>

Neon921 02.01.2018 23:23

Спасибо, не знал что именно таким образом. Еще вопрос, что нужно почитать или посмотреть, чтобы была возможность редактирования текста в верхнем боке пользователем, который будет там записан? К примеру там будет обычные ааааа, а пользователь поменяет это на ббббб?

рони 02.01.2018 23:55

Цитата:

Сообщение от Neon921
возможность редактирования текста

<div contenteditable class="text">

Neon921 03.01.2018 16:39

извиняюсь за свой тупняк) Это нужно примерно таким образом? Просто добавляю и не получается
contenteditable="true" style="outline:1px dotted blue"

<div class="text">test_01</div>

заменить на
<div contenteditable="true" class="text">test_01</div>

Ведь значение true дает возможность редактирования.
И как добавить в верхний блок такие же карточки? Вернее где строка отвечающая за добавление элементов туда.

рони 03.01.2018 17:13

Цитата:

Сообщение от Neon921
И как добавить в верхний блок такие же карточки?

:blink:
строка 62

Neon921 03.01.2018 18:06

Да точно, не обратил внимания на них. С редактированием возникли непонятки, можете по одной карточке какой-нибудь подсказать?

рони 03.01.2018 18:13

Neon921,
всё в коде выше

Neon921 03.01.2018 18:18

<div contenteditable class="text">test_01</div>

Оно не дает возможности его редактировать


Часовой пояс GMT +3, время: 05:23.