Search code examples
javascriptjqueryuser-interfacedomsortablejs

Click to swap elements between two lists

I'm using SortableJS to build a menu where hash-tag like label items can be dragged from a search result area to another area where they will be counted. I've got the drag-drop functionality working between the two lists. Now what I want to do is add click functionality so that when a tag item in one list is clicked it moves to the opposite list.

This should help users who don't expect to have to drag-drop, or who would rather click. The goal is to accommodate a broad range of user devices (mobile/desktop) and computer literacy (tech-savvy/not tech-savvy).

Here is an example of Shared Lists using SortableJS.

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

Both lists share the class list-group, which enables them to share items with each other.

I've been looking into the possibility of creating a script that gets the div element that is clicked on (from either list), removes it, and instantly re-adds to the opposite list, with all the div attributes and contents in tact. But maybe modifying the existing SortableJS code is a better approach?

-- As a quick test, I bypassed the UI and changed the order of the items purely in HTML using Developer Tools, and it didn't break the functionality. So doing the same with a script should work.

Currently I am researching how to have any item of a given class, when clicked on, removed from a parent element and then made a child of another parent element (the other list).

-- I found a simple and elegant jQuery script that seems promising for this sort of thing. I started to modify it to support two lists, but unfortunately, after multiple swaps it stops working correctly. Hopefully with some modification it can be made to work.

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

Scanning through the documentation for jQuery's .append() I can't figure out what I'm doing wrong.

Solution

  • I think you should use on click method of 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>