08.11.2019, 01:26
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
|
Как перетащить текст в поле input и записать его в value?
Всем привет  , подскажите плиз нубу. 
есть список li (может быть бесконечное количество) и есть несколько input
полей (может быть бесконечное количество), как перетягивая мышью li в input записать содержимое li (текст) в value input в который перетянули, и так любой другой текст из этого списка li в любой другой input? Важно после перемещения текста из li в input удалить перемещенный li, а input в который переместили заблокировать от изменений, что бы в него не переместили другой li из списка но оставить возможность перемещать оставшиеся li в другие input ?
<ul>
<li>Текст 1</li>
<li>Текст 2</li>
<li>Текст 3</li>
<li>Текст 4</li>
<li>Текст 5</li>
<li>Текст 6</li>
<li>Текст 7</li>
<li>Текст 8</li>
<li>Текст 9</li>
<li>Текст 10</li>
</ul>
<form>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
<input value=''>
</form>
|
|
08.11.2019, 09:38
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
нуб, то я нуб, но пользоваться поиском умею)
Если бы разобрался, я бы не спрашивал...
Мне удалось перетаскивать текст в input, но не удалось удалить li который переносили, а так же не удалось заблокировать input, в который перетащили от дальнейших изменений, ввести в ручную в него текст нельзя, но при перетаскивании все равно добавляется...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
</head>
<body>
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well">
<hr style = "border-top: 1px dotted #8c8b8b;"/>
<div class = "pull-left" style = "border:1px #000 dotted; width:230px;">
<center><label style = "font-size:9px;" class = "alert-danger">Please drag your favorite programming language</label></center>
<ul style = "list-style-type:none;" id = "draggable">
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
<li>HTML</li>
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>Python</li>
<li>Vb.net</li>
<li>Ruby</li>
<li>Pearl</li>
</ul>
<p></p>
</div>
<div class = "pull-right" style = "padding:20px; border:1px #000 dotted; width:400px;">
<div class = "form-group">
<input type = "text" name = "program1" class = "form-control p_lang ui-droppable" />
<input type = "text" name = "program2" class = "form-control p_lang ui-droppable" />
<input type = "text" name = "program3" class = "form-control p_lang ui-droppable" />
<input type = "text" name = "program4" class = "form-control p_lang ui-droppable" />
<center><label>Your favorite language</label></center>
<button class = "btn btn-success pull-left" id = "reset" type = "button"><span class = "glyphicon glyphicon-refresh"></span> Reset</button>
</div>
</div>
</div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$('#reset').on('click', function(){
$('ul').attr('id', 'draggable');
$('.p_lang').removeAttr('disabled', 'disabled');
$('.p_lang').val('');
});
$('li').mouseover(function(){
$(this).css('cursor', 'pointer');
});
$( "#draggable li" ).draggable({helper: 'clone'});
$(".p_lang").droppable({
accept: "#draggable li",
drop: function(ev, ui) {
$(this).insertAtCaret(ui.draggable.text());
$(this).attr('disabled', 'disabled');
$(this).closest('.droppable');
}
});
});
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
</script>
</html>
|
|
08.11.2019, 10:17
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Строки 63-65 заменить на:
if(ev.target.value) return false;
$(this).val(ui.draggable.text()).prop('disabled', true);
ui.draggable.remove();
$.fn.insertAtCaret - для данной вставки вообще не нужна.
Строки 52-54 заменить на:
$('.p_lang').val('').prop('disabled', false);
Если после перетаскивания удалять LI, то что должно быть тогда после reset, может быть не удалять, а скрывать их?
Последний раз редактировалось laimas, 08.11.2019 в 12:58.
|
|
08.11.2019, 15:18
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
Сообщение от laimas
|
Строки 63-65 заменить на:
if(ev.target.value) return false;
$(this).val(ui.draggable.text()).prop('disabled', true);
ui.draggable.remove();
$.fn.insertAtCaret - для данной вставки вообще не нужна.
Строки 52-54 заменить на:
$('.p_lang').val('').prop('disabled', false);
Если после перетаскивания удалять LI, то что должно быть тогда после reset, может быть не удалять, а скрывать их?
|
То, что нужно, большое спасибо  |
|
08.11.2019, 15:34
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от firsmember
|
|
То, что нужно
|
Точно? А мне кажется, что нет. |
|
11.11.2019, 11:03
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
|
Сообщение от laimas
|
|
Точно? А мне кажется, что нет.
|
Все работает, как нужно!
Единственное, нужно теперь еще что бы после того, как перетащили у того input куда перетащили справа появился значек редактирования, при нажатии на который поле бы очищалось и разблокировалось, а информация которую мы в него перетаскивали - вернулась в список li от куда мы ее перетаскивали в том же виде... |
|
11.11.2019, 11:04
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
|
Сообщение от laimas
|
|
Точно? А мне кажется, что нет.
|
Тут хоть убейте ума не приложу, как сделать, покажите? |
|
11.11.2019, 11:22
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от firsmember
|
Все работает, как нужно!
... а информация которую мы в него перетаскивали - вернулась в список li от куда мы ее перетаскивали
|
Каким образом ее вернуть на место, если ранее было условие "Важно после перемещения текста из li в input удалить перемещенный li"? Поэтому еще раз - так правильно ли работает, вернее правильно ли заданы условия? |
|
11.11.2019, 11:23
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
|
Сообщение от laimas
|
|
Каким образом ее вернуть на место, если ранее было условие "Важно после перемещения текста из li в input удалить перемещенный li"?
|
ок, давайте скрывать а не удалять ))) |
|
|
|
