11.11.2019, 11:39
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от 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 проверять, просто оно уже ни к чему. |
|
11.11.2019, 12:10
|
|
Кандидат Javascript-наук
|
|
Регистрация: 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> к примеру, ничего не происходит
|
|
11.11.2019, 12:18
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от firsmember
|
|
получается, что <button>Edit</button> обновляет страницу и сбрасывается все
|
Что за глупости, я же написал - добавить кнопке сброса имя - name="reset", id ее можно выбросить, либо это if(this.name=='reset') в коде заменить на if(this.id=='reset')
И не цитируйте мои сообщения целиком, это мусор лишний, а склерозом я пока не страдаю.  |
|
11.11.2019, 12:18
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
|
а нет, все хорошо)) Затупил слегка, нужно было отслеживать кликк по ссылке же, а не по кнопке))) Единственное ссылка edit не удаляется, после того, как очищаем поле
|
|
11.11.2019, 12:21
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от firsmember
|
|
Единственное ссылка edit не удаляется
|
Опять вы несете несусветное - в коде везде кнопки, обработка их делегируется родителю - $('div.pull-right').on('click', 'button'.... Меняя на всякие <a href="#"... (нахрена это делать непонятно), вносите и изменения в код. А то что не удаляется ..., так прочитайте то, чего вы просите, а просите вы опять "не до конца додуманное". |
|
11.11.2019, 12:31
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
|
Неет.. Ну посмотрите, у нас создается <button>Edit</button>
при клике на нее поле прекрасно очищается, и в списке li его снова становится видно, но <button>Edit</button> при этом остается, а при перетягивании в этот input любого LI создается еще одна <button>Edit</button>
|
|
11.11.2019, 12:35
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от firsmember
|
|
но <button>Edit</button> при этом остается, а при перетягивании в этот input любого LI создается еще одна <button>Edit</button>
|
Читать выше - "а просите вы опять "не до конца додуманное"". Интерфейс, его поведение, то есть логика работы его элементов управления, это забота заказчика описывать, а не исполнителя догадываться как должно быть. Так что как просилось, так и написалось, с замечанием о проблеме. |
|
11.11.2019, 12:49
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Ну каково должно быть поведение, может так?
<!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>
|
|
11.11.2019, 12:52
|
|
Кандидат Javascript-наук
|
|
Регистрация: 08.11.2019
Сообщений: 113
|
|
 вы супер крут! Любви, здоровья, Счастья вам  |
|
|
|
