Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как перетащить текст в поле input и записать его в value? (https://javascript.ru/forum/dom-window/78810-kak-peretashhit-tekst-v-pole-input-i-zapisat-ego-v-value.html)

firsmember 08.11.2019 00:26

Как перетащить текст в поле input и записать его в value?
 
Всем привет :victory: , подскажите плиз нубу.:(
есть список 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>

ksa 08.11.2019 06:22

firsmember, вот тебе статейка на эту тему...
https://javascript.ru/ui/draganddrop

firsmember 08.11.2019 08:38

Цитата:

Сообщение от ksa (Сообщение 515122)
firsmember, вот тебе статейка на эту тему...
https://javascript.ru/ui/draganddrop

нуб, то я нуб, но пользоваться поиском умею)
Если бы разобрался, я бы не спрашивал...
Мне удалось перетаскивать текст в 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>

laimas 08.11.2019 09:17

Строки 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, может быть не удалять, а скрывать их?

firsmember 08.11.2019 14:18

Цитата:

Сообщение от laimas (Сообщение 515137)
Строки 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, может быть не удалять, а скрывать их?

То, что нужно, большое спасибо :thanks:

laimas 08.11.2019 14:34

Цитата:

Сообщение от firsmember
То, что нужно

Точно? А мне кажется, что нет.

firsmember 11.11.2019 10:03

Цитата:

Сообщение от laimas (Сообщение 515159)
Точно? А мне кажется, что нет.

Все работает, как нужно!:victory:
Единственное, нужно теперь еще что бы после того, как перетащили у того input куда перетащили справа появился значек редактирования, при нажатии на который поле бы очищалось и разблокировалось, а информация которую мы в него перетаскивали - вернулась в список li от куда мы ее перетаскивали в том же виде...

firsmember 11.11.2019 10:04

Цитата:

Сообщение от laimas (Сообщение 515159)
Точно? А мне кажется, что нет.

Тут хоть убейте ума не приложу, как сделать, покажите?

laimas 11.11.2019 10:22

Цитата:

Сообщение от firsmember
Все работает, как нужно!
... а информация которую мы в него перетаскивали - вернулась в список li от куда мы ее перетаскивали

Каким образом ее вернуть на место, если ранее было условие "Важно после перемещения текста из li в input удалить перемещенный li"? Поэтому еще раз - так правильно ли работает, вернее правильно ли заданы условия?

firsmember 11.11.2019 10:23

Цитата:

Сообщение от laimas (Сообщение 515332)
Каким образом ее вернуть на место, если ранее было условие "Важно после перемещения текста из li в input удалить перемещенный li"?

ок, давайте скрывать а не удалять )))


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