Javascript-форум - Как перетащить текст в поле input и записать его в value?

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 01: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 07:22

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

firsmember

08.11.2019 09: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 10: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 15: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 15:34

Цитата:

Сообщение от firsmember

То, что нужно

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

firsmember

11.11.2019 11:03

Цитата:

Сообщение от laimas (Сообщение 515159)

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

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

firsmember

11.11.2019 11:04

Цитата:

Сообщение от laimas (Сообщение 515159)

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

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

laimas

11.11.2019 11:22

Цитата:

Сообщение от firsmember

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

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

firsmember

11.11.2019 11:23

Цитата:

Сообщение от laimas (Сообщение 515332)

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

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

laimas

11.11.2019 11:39

Цитата:

Сообщение от firsmember

ок, давайте скрывать

Да мне то все равно, но ведь опять не все условия оговорены, ибо это с добавлением кнопок, но ..., что значит но, думаю понятно будет после пробы. Это все, чем нужно заменить JS код.

$(function() {
    $('div.pull-right').on('click', 'button', function(){
        if(this.name=='reset') {
            $('#draggable li').show();
            $('.p_lang').val('').prop('disabled', false);
        } else {
            var e = $(this).prev();
            $('#draggable li:contains('+e.val()+')').show();
            e.val('').prop('disabled', false);
        }
	});
		
    $('li').mouseover(function(){
        $(this).css('cursor', 'pointer');
    });
		
    $( "#draggable li" ).draggable({helper: 'clone'});
    $(".p_lang").droppable({
        accept: "#draggable li",
		drop: function(ev, ui) {
            if(ev.target.value) return false;
            $(this).val(ui.draggable.text()).prop('disabled', true).after('<button>Edit</button>');
            ui.draggable.hide();
		}
	});
});

У кнопки сброса удалить id, достаточно указать имя 'reset', хотя можно и ее id проверять, просто оно уже ни к чему.

firsmember

11.11.2019 12:10

Цитата:

Сообщение от laimas (Сообщение 515335)

$(function() {
    $('div.pull-right').on('click', 'button', function(){
        if(this.name=='reset') {
            $('#draggable li').show();
            $('.p_lang').val('').prop('disabled', false);
        } else {
            var e = $(this).prev();
            $('#draggable li:contains('+e.val()+')').show();
            e.val('').prop('disabled', false);
        }
	});
		
    $('li').mouseover(function(){
        $(this).css('cursor', 'pointer');
    });
		
    $( "#draggable li" ).draggable({helper: 'clone'});
    $(".p_lang").droppable({
        accept: "#draggable li",
		drop: function(ev, ui) {
            if(ev.target.value) return false;
            $(this).val(ui.draggable.text()).prop('disabled', true).after('<button>Edit</button>');
            ui.draggable.hide();
		}
	});
});

У кнопки сброса удалить id, достаточно указать имя 'reset', хотя можно и ее id проверять, просто оно уже ни к чему.

получается, что <button>Edit</button> обновляет страницу и сбрасывается все.. а если <button>Edit</button> меняю на <a href="#">Edit</a> к примеру, ничего не происходит

laimas

11.11.2019 12:18

Цитата:

Сообщение от firsmember

получается, что <button>Edit</button> обновляет страницу и сбрасывается все

Что за глупости, я же написал - добавить кнопке сброса имя - name="reset", id ее можно выбросить, либо это if(this.name=='reset') в коде заменить на if(this.id=='reset')

И не цитируйте мои сообщения целиком, это мусор лишний, а склерозом я пока не страдаю. ;)

firsmember

11.11.2019 12:18

а нет, все хорошо)) Затупил слегка, нужно было отслеживать кликк по ссылке же, а не по кнопке))) Единственное ссылка edit не удаляется, после того, как очищаем поле

laimas

11.11.2019 12:21

Цитата:

Сообщение от firsmember

Единственное ссылка edit не удаляется

Опять вы несете несусветное - в коде везде кнопки, обработка их делегируется родителю - $('div.pull-right').on('click', 'button'.... Меняя на всякие <a href="#"... (нахрена это делать непонятно), вносите и изменения в код. А то что не удаляется ..., так прочитайте то, чего вы просите, а просите вы опять "не до конца додуманное".

firsmember

11.11.2019 12:31

Неет.. Ну посмотрите, у нас создается <button>Edit</button>
при клике на нее поле прекрасно очищается, и в списке li его снова становится видно, но <button>Edit</button> при этом остается, а при перетягивании в этот input любого LI создается еще одна <button>Edit</button>

laimas

11.11.2019 12:35

Цитата:

Сообщение от firsmember

но <button>Edit</button> при этом остается, а при перетягивании в этот input любого LI создается еще одна <button>Edit</button>

Читать выше - "а просите вы опять "не до конца додуманное"". Интерфейс, его поведение, то есть логика работы его элементов управления, это забота заказчика описывать, а не исполнителя догадываться как должно быть. Так что как просилось, так и написалось, с замечанием о проблеме.

laimas

11.11.2019 12:49

Ну каково должно быть поведение, может так?

<!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"><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>
$(function() {
    $('div.pull-right').on('click', 'button', function(){
        if(this.id=='reset') {
            $('#draggable li').show();
            $('.p_lang').val('').prop('disabled', false);
            $('button').not(this).remove();
        } else {
            var e = $(this).prev();
            $('#draggable li:contains('+e.val()+')').show();
            e.val('').prop('disabled', false);
            $(this).remove();
        }
	});
		
    $('li').mouseover(function(){
        $(this).css('cursor', 'pointer');
    });
		
    $( "#draggable li" ).draggable({helper: 'clone'});
    $(".p_lang").droppable({
        accept: "#draggable li",
		drop: function(ev, ui) {
            if(ev.target.value) return false;
            $(this).val(ui.draggable.text()).prop('disabled', true).after('<button>Edit</button>');
            ui.draggable.hide();
		}
	});
});
</script>
</html>

firsmember

11.11.2019 12:50

Услышал вас, исправлюсь :thanks:
https://javascript.ru/forum/showthre...329#post515329
Тут я максимально точно описал... Не подскажете?

firsmember

11.11.2019 12:52

:dance: вы супер крут! Любви, здоровья, Счастья вам :thanks:

laimas

11.11.2019 12:52

Цитата:

Сообщение от firsmember

Тут я максимально точно описал...

И каким образом контекст темы по ссылке относится к контексту этой темы?

firsmember

11.11.2019 12:54

никаким, подумал что там вообще для вас 2 раза плюнуть :(

laimas

11.11.2019 12:58

Цитата:

Сообщение от firsmember

подумал что там вообще для вас 2 раза плюнуть

Там также не наблюдается логики в постановке задачи. Ну во-первых - для сервера глубоко плевать на каком месте в запросе находится тот или иной ключ ведь в итоге он получит ассоциативный массив параметров, ну или объект свойств в случае, например, Node.js на сервере. Во-вторых само описание задачи вообще не понятно, чего нужно.

firsmember

11.11.2019 13:10

а я про порядок там ничего и не говорил, я сказал про ключ который нужно дописать и что он у меня в примере адреса находится в конце))

А задача если просто, получить ключи из формы - сформировать url по примеру, перейти по нему и заполнить форму теми ключами, из которых мы составляли url ... все...

laimas

11.11.2019 13:25

Цитата:

Сообщение от firsmember

а я про порядок там ничего и не говорил, я сказал про ключ который нужно дописать

&um_search=1 - дописывается всегда в конце, так и должно быть, так и нужно... - это что не порядок?

firsmember

11.11.2019 13:32

Ну я имел в виду, что нужно тоже дописать ) наверное удобней сделать это в конце) Может в той теме обсудим?)
Поможете там? скину вам на пиво на ЯД )

shakhin

17.04.2022 19:33

Как изменить код чтобы он сработал и в сенсорных устройствах и в компьютере ?
<!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>
[/html][/quote]

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