user2513846 user2513846 - 5 months ago 57x
Javascript Question

jQuery UI .sortable .on click move items and also keep sorting functionality

I have a working code that on click moves item from 2 lists back and forth.
However this breaks the sorting functionality.

I want to be able to use the click but also be able to sort the item by dragging them if necessary and avoid to fire the .on click in this case.

what should I do?



<h5 class="prefix-popover-heading">Group 1</h5>
<!-- IF .prefix_option or .prefix_used -->
<ul id="available_prefixes" class="prefixed_sortable list-inline">
<!-- <li id="disable-selection">{L_PREFIX_BASKET}</li> -->
<li class="click_area">item1</li>
<li class="click_area">item2</li>
<li class="click_area">item3</li>

<h5 class="prefix-popover-heading">Group 2</h5>
<div class="group2">
<div id="PrefixBtn" class="input-group-addon fade">
<ul id="used_prefixes" class="prefixed_sortable">
<!-- <li class="placeholder">Drop here</li> -->
<li class="click_area">item4</li>
<li class="click_area">item5</li>
<li class="click_area">item6</li>



// Make divs sortable
$("#available_prefixes, #used_prefixes").sortable({
connectWith: '.prefixed_sortable',
items: 'li',
forcePlaceholderSize: true,
placeholder: 'ui-sortable-placeholder',
tolerance: 'pointer',
// lets make it easier and append item on click as well
.on('click', '.click_area', function(){
$(this).appendTo($("#available_prefixes, #used_prefixes").not($(this).closest("ul")));

apparently this is a problem only under FIREFOX. Under CHROME works as intended. How do I fix it?


The issue appears in FireFox because the click event is handled differently. I have no idea why that is the case, but the functionality you want will work if you change the click event to a mouseup event. It's okay to use the mouseup event in your context and it won't cause items to move if the event occurs outside the "sortable" area.

Updated Fiddle