Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2019, 01:26
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 08.11.2019, 07:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

firsmember, вот тебе статейка на эту тему...
https://javascript.ru/ui/draganddrop
Ответить с цитированием
  #3 (permalink)  
Старый 08.11.2019, 09:38
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

Сообщение от ksa Посмотреть сообщение
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>
Ответить с цитированием
  #4 (permalink)  
Старый 08.11.2019, 10:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Строки 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.
Ответить с цитированием
  #5 (permalink)  
Старый 08.11.2019, 15:18
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 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, может быть не удалять, а скрывать их?
То, что нужно, большое спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 08.11.2019, 15:34
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от firsmember
То, что нужно
Точно? А мне кажется, что нет.
Ответить с цитированием
  #7 (permalink)  
Старый 11.11.2019, 11:03
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

Сообщение от laimas Посмотреть сообщение
Точно? А мне кажется, что нет.
Все работает, как нужно!
Единственное, нужно теперь еще что бы после того, как перетащили у того input куда перетащили справа появился значек редактирования, при нажатии на который поле бы очищалось и разблокировалось, а информация которую мы в него перетаскивали - вернулась в список li от куда мы ее перетаскивали в том же виде...
Ответить с цитированием
  #8 (permalink)  
Старый 11.11.2019, 11:04
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

Сообщение от laimas Посмотреть сообщение
Точно? А мне кажется, что нет.
Тут хоть убейте ума не приложу, как сделать, покажите?
Ответить с цитированием
  #9 (permalink)  
Старый 11.11.2019, 11:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от firsmember
Все работает, как нужно!
... а информация которую мы в него перетаскивали - вернулась в список li от куда мы ее перетаскивали
Каким образом ее вернуть на место, если ранее было условие "Важно после перемещения текста из li в input удалить перемещенный li"? Поэтому еще раз - так правильно ли работает, вернее правильно ли заданы условия?
Ответить с цитированием
  #10 (permalink)  
Старый 11.11.2019, 11:23
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
объекте есть свойство, текст с вдойными ковычками, как его целиком вытащить Sergey1986 Javascript под браузер 29 15.01.2019 07:49
как джава скриптом нажать клавишу энтер когда ввел текст в текстовое поле? денис77447327 Javascript под браузер 1 05.10.2017 09:04
DOM vs iframe. Как в ифрейме заменить выделенный текст (его innerHTML)? Бухалыч Events/DOM/Window 4 20.08.2009 14:30
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55