Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 11.11.2019, 11:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от 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 проверять, просто оно уже ни к чему.
Ответить с цитированием
  #12 (permalink)  
Старый 11.11.2019, 12:10
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

Сообщение от laimas Посмотреть сообщение
Да мне то все равно, но ведь опять не все условия оговорены, ибо это с добавлением кнопок, но ..., что значит но, думаю понятно будет после пробы. Это все, чем нужно заменить 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 проверять, просто оно уже ни к чему.
получается, что <button>Edit</button> обновляет страницу и сбрасывается все.. а если <button>Edit</button> меняю на <a href="#">Edit</a> к примеру, ничего не происходит
Ответить с цитированием
  #13 (permalink)  
Старый 11.11.2019, 12:18
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от firsmember
получается, что <button>Edit</button> обновляет страницу и сбрасывается все
Что за глупости, я же написал - добавить кнопке сброса имя - name="reset", id ее можно выбросить, либо это if(this.name=='reset') в коде заменить на if(this.id=='reset')

И не цитируйте мои сообщения целиком, это мусор лишний, а склерозом я пока не страдаю.
Ответить с цитированием
  #14 (permalink)  
Старый 11.11.2019, 12:18
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

а нет, все хорошо)) Затупил слегка, нужно было отслеживать кликк по ссылке же, а не по кнопке))) Единственное ссылка edit не удаляется, после того, как очищаем поле
Ответить с цитированием
  #15 (permalink)  
Старый 11.11.2019, 12:21
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от firsmember
Единственное ссылка edit не удаляется
Опять вы несете несусветное - в коде везде кнопки, обработка их делегируется родителю - $('div.pull-right').on('click', 'button'.... Меняя на всякие <a href="#"... (нахрена это делать непонятно), вносите и изменения в код. А то что не удаляется ..., так прочитайте то, чего вы просите, а просите вы опять "не до конца додуманное".
Ответить с цитированием
  #16 (permalink)  
Старый 11.11.2019, 12:31
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

Неет.. Ну посмотрите, у нас создается <button>Edit</button>
при клике на нее поле прекрасно очищается, и в списке li его снова становится видно, но <button>Edit</button> при этом остается, а при перетягивании в этот input любого LI создается еще одна <button>Edit</button>
Ответить с цитированием
  #17 (permalink)  
Старый 11.11.2019, 12:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от firsmember
но <button>Edit</button> при этом остается, а при перетягивании в этот input любого LI создается еще одна <button>Edit</button>
Читать выше - "а просите вы опять "не до конца додуманное"". Интерфейс, его поведение, то есть логика работы его элементов управления, это забота заказчика описывать, а не исполнителя догадываться как должно быть. Так что как просилось, так и написалось, с замечанием о проблеме.
Ответить с цитированием
  #18 (permalink)  
Старый 11.11.2019, 12:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

<!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>
Ответить с цитированием
  #19 (permalink)  
Старый 11.11.2019, 12:50
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

Услышал вас, исправлюсь
https://javascript.ru/forum/showthre...329#post515329
Тут я максимально точно описал... Не подскажете?
Ответить с цитированием
  #20 (permalink)  
Старый 11.11.2019, 12:52
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
объекте есть свойство, текст с вдойными ковычками, как его целиком вытащить 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