jQuery: нажмите, чтобы поменять элементы между двумя списками - PullRequest
Новая
       21

jQuery: нажмите, чтобы поменять элементы между двумя списками

1 голос
/ 18 апреля 2019

Я использую SortableJS для создания меню, в котором хеш-теги, подобные элементам меток, можно перетаскивать из области результатов поиска в другую область, где они будут учитываться.У меня есть функция перетаскивания, работающая между двумя списками. Теперь я хочу добавить функцию щелчка, чтобы при нажатии на элемент тега в одном списке он перемещался в противоположный список.

Это должно помочь пользователям, которые не ожидаютпридется перетаскивать, или кто бы предпочел нажать.Цель состоит в том, чтобы охватить широкий спектр пользовательских устройств (мобильные / настольные) и компьютерную грамотность (технически подкованные / не технически подкованные).

Вот пример общих списков, использующих SortableJS.

SortableJS shared lists. These items can be drag-dropped between lists, but I want them to be clickable.

Оба списка имеют общий класс list-group, что позволяет им обмениваться объектами друг с другом.

Я искал возможность создания сценария, который получает элемент div, на который нажимают (из любого списка), удаляет его и мгновенно повторно добавляет в противоположный список со всеми элементами div.атрибуты и содержание в такте.Но может быть, изменение существующего кода SortableJS - лучший подход?

Обновление

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

В настоящее время я изучаю, как получить любой элемент данного класса, щелкнуть по нему, удалить из родительского элемента, а затем сделать его дочерним по отношению к другому родительскому элементу (другой список).

Обновление 2

Я нашел простой и элегантный скрипт jQuery , который кажется многообещающим для такого рода вещей.Я начал изменять его для поддержки двух списков, но, к сожалению, после нескольких перестановок он перестает работать правильно.Надеюсь, с некоторыми изменениями это можно сделать, чтобы работать. 

<!DOCTYPE html>
<html>
<head>
<style>
	div {
		width: 180px;
		padding: 2px 12px;
		margin-bottom: 10px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

<div id="div1" style="background-color: #a55">
<p class="swappable">Paragraph one.</p>
<p class="swappable">Paragraph two.</p>
</div>

<div id="div2" style="background-color: #bab1e5">
<p class="swappable">Paragraph three.</p>
<p class="swappable">Paragraph four.</p>
</div>

<script>
$("#div1 p").click(function() {
	
	$("#div2").append($(this));
	
});

$("#div2 p").click(function() {
	
	$("#div1").append($(this));
	
});
</script>

</body>
</html>

Сканирование с помощью документации для japu's .append () Я не могу понять, что я делаю неправильно.

1 Ответ

1 голос
/ 18 апреля 2019

Я думаю, вы должны использовать метод jQuery

. 
    <!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 180px;
        padding: 2px 12px;
        margin-bottom: 10px;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

<div id="div1" style="background-color: #a55">
<p class="swappable">Paragraph one.</p>
<p class="swappable">Paragraph two.</p>
</div>

<div id="div2" style="background-color: #bab1e5">
<p class="swappable">Paragraph three.</p>
<p class="swappable">Paragraph four.</p>
</div>

<script>
$("#div1").on("click","p",function() {
    $("#div2").append($(this));

});

$("#div2").on("click","p",function() {
    $("#div1").append($(this));
});
</script>

</body>
</html>
...