| Fiks | 16.09.2017 21:10 |
Как сделать multiple
Как сделать такой multiple
Чтобы при переносе, данные все равно оставались?
Чтобы при переносе, данные все равно оставались?
Как сделать multiple
Как сделать такой multiple
Чтобы при переносе, данные все равно оставались? |
Где "Точки маршрута".
|
Нужно, чтобы нажал на ЮТК и перенес в другую таблицу, а в этой осталось.
|
Берешь, выбираешь элемент. Нажимаешь "добавить" и в этот момент переноситься в другой select, но откуда добавлено было, остается.
|
Fiks,
клонирование элемента |
Это набросок на первый случай )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<div class="multi">
<div id="list"></div>
<div>
<span class="btn" onclick="multi();"><<<</span>
</div>
<div class="points">
<ul class='list'>
<li class="li">lorem1</li>
<li class="li">lorem2</li>
<li class="li">lorem3</li>
<li class="li">lorem4</li>
<li class="li">lorem5</li>
<li class="li">lorem6</li>
<li class="li">lorem7</li>
<li class="li">lorem8</li>
<li class="li">lorem9</li>
<li class="li">lorem10</li>
</ul>
</div>
</div>
<script>
var activ;
window.onload = function(){
var items = document.querySelectorAll('.list .li');
for(var i = 0; i < items.length; i++){
items[i].onclick = activeItem;
}
function activeItem(){
this.classList.toggle('active');
activ = this.innerHTML;
}
}
function multi(){
var div = document.createElement('li');
div.className = 'li';
div.innerHTML = activ;
list.appendChild(div);
}
</script>
<style>
body, html{
min-height: 100%;
height: 100%;
margin:0;
}
.multi{
height: 100%;
width: 800px;
margin:0 auto;
}
.multi div{height: 100%;
float:left;
width: 33%;
border-right: 1px solid #ccc;
}
.list li{
padding:10px;
cursor:pointer;
}
.list li:hover{
background: #ccc;
}
.btn{
padding:10px;
margin:40px;
background: #f1f1f1;
border:1 px solid #ccc;
border-radius:5px;
display:block;
}
.btn:hover{
background: #ccc;
cursor:pointer;
}
.active{
background: #ccc;
color:blue;
}
</style>
</body>
</html>
|
Вполне могу. Что сложного в этом?
|
void(),
Спасибо. |
Я конечно все понимаю, но что от тебя за негатив? Мне нужен был принцип, а не размета. А ты я смотрю можешь только критиковать.
|
void(),
А как мне удалять по кнопке? |
На первый случай)
Но вот тут есть варианты по интереснее - https://learn.javascript.ru/modifying-document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<div class="multi">
<div id="list2"></div>
<div>
<span class="btn" onclick="multi();"><<<</span>
<span class="btn" onclick="multiDel();">>>>></span>
</div>
<div class="points">
<ul class='list'>
<li class="li">lorem1</li>
<li class="li">lorem2</li>
<li class="li">lorem3</li>
<li class="li">lorem4</li>
<li class="li">lorem5</li>
<li class="li">lorem6</li>
<li class="li">lorem7</li>
<li class="li">lorem8</li>
<li class="li">lorem9</li>
<li class="li">lorem10</li>
</ul>
</div>
</div>
<script>
var activ;
function jq(){
var items = document.querySelectorAll('.multi .li');
for(var i = 0; i < items.length; i++){
items[i].onclick = activeItem;
}
function activeItem(){
this.classList.toggle('active');
activ = this;
}
}
function multi(){
var div = document.createElement('li');
div.className = 'li';
div.innerHTML = activ.innerHTML;
list2.appendChild(div);
jq();
}
function multiDel(){
activ.parentNode.removeChild(activ);
}
jq();
</script>
<style>
body, html{
min-height: 100%;
height: 100%;
margin:0;
}
.multi{
height: 100%;
width: 800px;
margin:0 auto;
}
.multi div{height: 100%;
float:left;
width: 33%;
border-right: 1px solid #ccc;
}
.list li{
padding:10px;
cursor:pointer;
}
.list li:hover{
background: #ccc;
}
#list2 li{
padding:10px;
cursor:pointer;
}
#list2 li:hover{
background: #ccc;
}
.btn{
padding:10px;
margin:40px;
background: #f1f1f1;
border:1 px solid #ccc;
border-radius:5px;
display:block;
}
.btn:hover{
background: #ccc;
cursor:pointer;
}
.active{
background: #ccc;
color:blue;
}
</style>
</body>
</html>
|
Только он в .points тоже удаляет, если нажать
|
Да... это не готовый вариант.
|
| Часовой пояс GMT +3, время: 00:20. |