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

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

Да мне то все равно, но ведь опять не все условия оговорены, ибо это с добавлением кнопок, но ..., что значит но, думаю понятно будет после пробы. Это все, чем нужно заменить 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 проверять, просто оно уже ни к чему.

Цитата:

Сообщение от 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> к примеру, ничего не происходит

Цитата:

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

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

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

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

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

Цитата:

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

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

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

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

Цитата:

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

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

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

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

<!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>

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

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