We Keep Coding

How to change styles/remove certain elements when moving elements from one list to another using sortable?

This is the case. I have List 1 (id=favoriteList) and List 2 (id=otherList).
The code for list one is this:
<div class="generic_feature_list" data-role="content" data-theme="c">
<ul data-role="listview" data-inset="true" data-theme="d" id="favoriteList">
<li data-role="list-divider">
<div class="row">
<div class="col-md-6">
<span>Holidays</span>
</div>
<div class="col-md-6">
€2000
</div>
</div>
</li>
</ul>
</div>
The code for list 2:
<div data-role="content" data-theme="c">
<ul style="list-style-type: none;" data-role="listview" data-inset="true" data-theme="d" id="otherList">
<li data-role="list-divider">
<div class="row">
<div class="col-xl-6 col-lg-6">
<div class="card l-bg-blue-dark">
<div class="card-statistic-3 p-4">
<div class="card-icon card-icon-large"><i class="fas fa-laptop"></i></div>
<div class="mb-4">
<h5 class="card-title mb-0">Laptop</h5>
</div>
<div class="row align-items-center mb-2 d-flex">
<div class="col-8">
<h2 class="d-flex align-items-center mb-0">
€1500
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
and my js and refs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script>
let favoriteList = document.getElementById('favoriteList');
let otherList = document.getElementById('otherList');
let favorite_list = Sortable.create(favoriteList, {
animation: 150,
group: 'shared',
ghostClass: 'sortable-ghost',
});
let other_list = Sortable.create(otherList, {
animation: 150,
group: 'shared',
ghostClass: 'sortable-ghost',
sort: false
});
$(function(){
var removeIntent = false;
$('#otherList').sortable({
over: function () {
removeIntent = false;
},
out: function () {
removeIntent = true;
},
beforeStop: function (event, ui) {
if(removeIntent == true){
ui.item.remove();
}
}
});
});
</script>
I would like to transform the elements from list 2 like elements from list 1 so I suppose I would need to remove certains divs and change some styles.
I've followed these instructions with no luck:
How to remove the text of sortable area when item is dropped on it?
Sortable element stay after remove()
How to remove an item that is pulled away from it's list?
How to change sortable element's style while dragging?
Remove item after successful JQuery Sortable action
jQueryUI Sortable - Remove a li from the sortable list
Could somebody please help me?

JQuery basic text replacement on click/change using .parent() and .closest()

I have this dropdown styled with ul and I need to replace the heading with the very first content inside the <span class="parent">some text</span>
The <ul> contains different sections with each section different headings. Such as locations, provinces, languages etc.
I have figured out how to do this, but each time it only grabs the first heading even if the heading of the chosen option changes.
So for example if I select something from let's say Provinces, the heading of my label doesn't change to Provinces but it stays on Country.
What am I doing wrong here?
Screenshot
/* Destination selection */
$('.field-destination').each(function() {
var parent = $(this);
var dropdown_menu = $('.dropdown-menu', parent);
$('li', dropdown_menu).on('click', function() {
$('.destination', parent).text($(this).find('span').text());
//$('label', parent).text($(this).closest('.parent_li').find('span.parent').text());
$('label', parent).text($(this).parent().find('.parent_li').closest('li').find('.parent').first().text());
$('input[name="location_name"]', parent).val($(this).find('span').text());
$('input[name="location_id"]', parent).val($(this).data('value'));
if (window.matchMedia('(max-width: 767px)').matches) {
$('label', parent).hide();
$('.render', parent).show();
}
dropdown_menu.slideUp(50);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-extra-field dropdown clearfix field-destination has-icon">
<i class="input-icon field-icon fa"></i>
<div class="dropdown" data-toggle="dropdown" id="dropdown-destination">
<label>Locatie</label>
<div class="render">
<span class="destination">Kies een plaats</span>
</div>
</div>
<input type="hidden" name="location_name" value="">
<input type="hidden" name="location_id" value="">
<ul aria-labelledby="dropdown-destination" class="dropdown-menu" tabindex="1">
<li class="item parent_li" data-country="" data-value=""><span class="parent">Country</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">City</span></li>
...
<li class="item parent_li" data-country="" data-value=""><span class="parent">Provinces</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">Province</span></li>
...
<li class="item parent_li" data-country="" data-value=""><span class="parent">Languages</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">language</span></li>
</ul>
</div>
Can anyone help me out?

How to create multi-filter gallery like woocommerce/ecommerce product filter

I need a multifilter gallery like woocommerce/ecommerce product filter
here is three type filter dropdown COLOR, SIZE and SHAPE
for example If I will select color: red and green, size: small and shape: round
So it should filter which boxes have following classes red+small+round and which boxes have following classes green+small+round
and I need to show selected filter name in filter name line
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="multifilter-gallery-wrap">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="multifilter-gallery-nav nav">
<li class="nav-item dropdown">
Color
<ul class="dropdown-menu not-close-dropdown" data-display="static">
<li class="multifilter-gallery-button color" data-filter="red">
<input type="checkbox" value="on">
Red
</li>
<li class="multifilter-gallery-button color" data-filter="green">
<input type="checkbox" value="on">
green
</li>
</ul>
</li>
<li class="nav-item dropdown">
Size
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button size" data-filter="small">
<input type="checkbox">
Small
</li>
<li class="multifilter-gallery-button size" data-filter="medium">
<input type="checkbox">
Medium
</li>
</ul>
</li>
<li class="nav-item dropdown">
shape
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button shape" data-filter="square">
<input type="checkbox">
square
</li>
<li class="multifilter-gallery-button shape" data-filter="round">
<input type="checkbox">
round
</li>
</ul>
</li>
<li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
</ul>
</nav>
<p class="shape-name"> shape: (here will show the selected shape name)</p>
<p class="color-name"> color: (here will show the selected color name)</p>
<p class="size-name"> Size: (here will show the selected Size name)</p>
<div class="row mt-5">
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
<div class="bg-danger m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">Red Small square</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
<div class="bg-success m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">green medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
<div class="bg-danger m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">Red medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
<div class="bg-success m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">green Small square</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
// venue filter script
$(".multifilter-gallery-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
$(this).addClass("active");
$(".multifilter-gallery-button").not(this).removeClass('active').find('input[type="checkbox"]').attr('checked',false);
$('.multifilter-gallery-box').show('1000');
}
else
{
$('.multifilter-gallery-button.active[data-filter="all"]').removeClass('active');
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).find('input[type="checkbox"]').attr('checked',false);
}else{
$(this).addClass("active");
$(this).find('input[type="checkbox"]').attr('checked',true);
}
if($('.multifilter-gallery-button.active').length){
var classes = '';
$('.multifilter-gallery-button.active').each(function(index, el) {
classes += '.'+$(this).attr('data-filter');
});
$(".multifilter-gallery-box").not(classes).hide('3000');
$('.multifilter-gallery-box').filter(classes).show('3000');
}else{
$('.multifilter-gallery-button[data-filter="all"]').click();
}
}
});
$('ul.not-close-dropdown').on('click', function (event) {
event.stopPropagation();
});
///////////
})
})(jQuery);
</script>

hope it will solve your problem. works perfectly.
remove your js code, and include this one.
(function ($) {
$(document).ready(function() {
$('.multifilter-gallery-button').click(function(){
var value = $(this).data('filter');
if(value == 'all'){
$('.multifilter-gallery-button').removeClass('active');
$('.multifilter-gallery-button input[type="checkbox"]').prop('checked', false);
$(this).addClass('active');
$('.multifilter-gallery-box').show();
$('.size-name').html('Size : '+'All');
$('.color-name').html('Color : '+'All');
$('.shape-name').html('Shape : '+'All');
}else{
$('.multifilter-gallery-button[data-filter="all"]').removeClass('active');
$('.multifilter-gallery-box').hide();
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).find('input[type="checkbox"]').prop('checked', false);
}else{
$(this).addClass('active');
$(this).find('input[type="checkbox"]').prop('checked', true);
}
var colors = $('.multifilter-gallery-button.color.active');
var sizes = $('.multifilter-gallery-button.size.active');
var shapes = $('.multifilter-gallery-button.shape.active');
var colorsArray = $.map( colors, function( val, i ) {
return $(val).data('filter');
});
var sizesArray = $.map( sizes, function( val, i ) {
return $(val).data('filter');
});
var shapesArray = $.map( shapes, function( val, i ) {
return $(val).data('filter');
});
var combinations = [];
if(colorsArray.length > 0){
var colorsTexts = $.map( colors, function( val, i ) {
return $(val).text();
});
$('.color-name').html('Color : '+colorsTexts.join(', '));
combinations = colorsArray;
}else{
$('.color-name').html('Color : '+'No color selected');
}
if(sizesArray.length > 0){
var sizesTexts = $.map( sizes, function( val, i ) {
return $(val).text();
});
$('.size-name').html('Size : '+sizesTexts.join(', '));
if(combinations.length > 0){
var tempCombinations = combinations;
combinations = [];
$.each($(tempCombinations), function(i, c){
$.each($(sizesArray), function(ii, sz){
var combination = [c, sz];
combinations.push(combination);
});
});
}else{
combinations = sizesArray;
}
}else{
$('.size-name').html('Size : '+'No size selected');
}
if(shapesArray.length > 0){
var shapesTexts = $.map( shapes, function( val, i ) {
return $(val).text();
});
$('.shape-name').html('Shape : '+shapesTexts.join(', '));
if(combinations.length > 0){
var tempCombinations = combinations;
combinations = [];
$.each($(tempCombinations), function(i, c){
if($.isArray(c)){
$.each($(shapesArray), function(ii, s){
var combination = $.merge([s], c);
combinations.push(combination);
});
}else{
$.each($(shapesArray), function(ii, s){
var combination = [c, s];
combinations.push(combination);
});
}
});
}else{
combinations = shapesArray;
}
}else{
$('.shape-name').html('Shape : '+'No shapes selected');
}
//show boxes
if(combinations.length > 0){
$.each($(combinations), function(i, val){
if($.isArray(val)){
var classes = val.join('.');
$('.multifilter-gallery-box'+'.'+classes).show();
}else{
$('.multifilter-gallery-box'+'.'+val).show();
}
});
}else{
$('.multifilter-gallery-button[data-filter="all"]').click();
}
}
});
})
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="multifilter-gallery-wrap">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="multifilter-gallery-nav nav">
<li class="nav-item dropdown">
Color
<ul class="dropdown-menu not-close-dropdown" data-display="static">
<li class="multifilter-gallery-button color" data-filter="red">
<input type="checkbox" value="on">
Red
</li>
<li class="multifilter-gallery-button color" data-filter="green">
<input type="checkbox" value="on">
green
</li>
</ul>
</li>
<li class="nav-item dropdown">
Size
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button size" data-filter="small">
<input type="checkbox">
Small
</li>
<li class="multifilter-gallery-button size" data-filter="medium">
<input type="checkbox">
Medium
</li>
</ul>
</li>
<li class="nav-item dropdown">
shape
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button shape" data-filter="square">
<input type="checkbox">
square
</li>
<li class="multifilter-gallery-button shape" data-filter="round">
<input type="checkbox">
round
</li>
</ul>
</li>
<li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
</ul>
</nav>
<p class="shape-name"> shape: (here will show the selected shape name)</p>
<p class="color-name"> color: (here will show the selected color name)</p>
<p class="size-name"> Size: (here will show the selected Size name)</p>
<div class="row mt-5">
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
<div class="bg-danger m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">Red Small square</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
<div class="bg-success m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">green medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
<div class="bg-danger m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">Red medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
<div class="bg-success m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">green Small square</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>

Change class active on click menu list

I'm trying to change the activeTest class of section tag on click, and remove the class that from the section he was, and put on the section I expect to;
I tried the parent() and sibling().
$(document).ready(function() {
$("#test123 .links").click(function(e) {
if (!$(".conteudo-projetoPesquisa").hasClass('active')) {
$(".conteudo-projetoPesquisa.active").removeClass("active");
$(".conteudo-projetoPesquisa.active").siblings().addClass("active");
}
});
});
.conteudo-projetoPesquisa {
display: none;
}
.conteudo-projetoPesquisa.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test123" class="row center-xs around-md">
<li class="col-xs-12 col-md-4">
institucional
</li>
<li class="col-xs-12 col-md-4 maioresMelhor">
Maiores e Melhores
</li>
<li class="col-xs-12 col-md-4 faleConosco">
Fale Conosco
</li>
</ul>
<section class="conteudo-projetoPesquisa container active">1
</section>
<section class="conteudo-projetoPesquisa container">2
</section>
<section class="conteudo-projetoPesquisa container">3
</section>

Using Your Code
If your order of links is always the same as the sections you can use the index of the clicked link to determine which section to make visible.
Using index on $("#test123 .links") allows you to query for the index of the clicked link.
Using eq on the collection of $(".conteudo-projetoPesquisa") using the previously determined index will select the section in the same index the clicked link is in.
$(document).ready(function() {
$("#test123 .links").click(function(e) {
var index = $("#test123 .links").index(this);
$(".conteudo-projetoPesquisa").removeClass('active');
$(".conteudo-projetoPesquisa").eq(index).addClass('active');
});
});
.conteudo-projetoPesquisa {
display: none;
}
.conteudo-projetoPesquisa.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test123" class="row center-xs around-md">
<li class="col-xs-12 col-md-4">
institucional
</li>
<li class="col-xs-12 col-md-4 maioresMelhor">
Maiores e Melhores
</li>
<li class="col-xs-12 col-md-4 faleConosco">
Fale Conosco
</li>
</ul>
<section class="conteudo-projetoPesquisa container active">1
</section>
<section class="conteudo-projetoPesquisa container">2
</section>
<section class="conteudo-projetoPesquisa container">3
</section>
Alternative using Data Attributes
However, if you have any control over it, it would be better to "pair" the elements. If you for example can populate a data attribute to assign the matching section number to the link itself than the order is not important.
<a href="#!" class="links" data-section-id="1">...
<a href="#!" class="links" data-section-id="2">...
Then you can assign the same value to each section and therefore "pair" the elements.
<section class="conteudo-projetoPesquisa container active" data-section-id="1">...
<section class="conteudo-projetoPesquisa container active" data-section-id="2">...
Then you can use the following code:
$(document).ready(function() {
$("#test123 .links").click(function(e) {
var sectionId = $(this).data('sectionId');
$(".conteudo-projetoPesquisa").removeClass('active');
$(".conteudo-projetoPesquisa[data-section-id=" + sectionId + "]").addClass('active');
});
});
.conteudo-projetoPesquisa {
display: none;
}
.conteudo-projetoPesquisa.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test123" class="row center-xs around-md">
<li class="col-xs-12 col-md-4">
institucional
</li>
<li class="col-xs-12 col-md-4 maioresMelhor">
Maiores e Melhores
</li>
<li class="col-xs-12 col-md-4 faleConosco">
Fale Conosco
</li>
</ul>
<section class="conteudo-projetoPesquisa container active" data-section-id="1">1
</section>
<section class="conteudo-projetoPesquisa container" data-section-id="2">2
</section>
<section class="conteudo-projetoPesquisa container" data-section-id="3">3
</section>

To connect links and tabs you should use data-attr
Something like this
$('[data-tab-trigger]').click(function(){
if($(this).is('.active')){
return false;
}
var $wrap = $(this).parents('.tab-wrap');
$('[data-tab-trigger]',$wrap).removeClass('active');
$(this,$wrap).addClass('active');
$('[data-tab-section]',$wrap).removeClass('active');
$('[data-tab-section="'+$(this).data('tab-trigger')+'"]',$wrap).addClass('active');
})
.hide-tab{
display:none;
padding:20px;
background:#333;
color:#fff;
}
.hide-tab.active{
display:block;
}
.tab-wrap{
margin:20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-wrap">
<div data-tab-trigger="1">show first tab</div>
<div data-tab-trigger="2">show second tab</div>
<div class="hide-tab" data-tab-section="2">
second tab
</div>
<div class="hide-tab" data-tab-section="1">
first tab
</div>
</div>
<div class="tab-wrap">
<div data-tab-trigger="1">show first tab</div>
<div data-tab-trigger="2">show second tab</div>
<div class="hide-tab" data-tab-section="2">
second tab
</div>
<div class="hide-tab" data-tab-section="1">
first tab
</div>
</div>

scroll to top using href id

I want to scroll the div to top position.I have problem with get the href value.now 'a' returns undefined in console.log(a);
function myFunction()
{
var a=$(this).attr('href');
console.log(a);
$('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
}
#consulting,#segments,#partner,#insights{min-height:100vh;}
.secMenu{position:fixed;
}
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions</li>
<li class="test2">Segments</li>
<li class="test3">Our Partners</li>
<li class="test4">Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>

I've made an alternative to what you used, but it does the same thing. I removed the function you used and used jQuery instead. Hope my answer works for you:
$('.nav li a').on('click', function(e) {
e.preventDefault();
var a = $(this).attr('href');
$('html, body').animate({
scrollTop: $(a).offset().top
}, 500);
});
#consulting,
#segments,
#partner,
#insights {
min-height: 100vh;
}
.secMenu {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions
</li>
<li class="test2">Segments
</li>
<li class="test3">Our Partners
</li>
<li class="test4">Perspectives
</li>
</ul>
</div>
</div>
<!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
To see it in action you can hit the Run code snippet button above or you can see a fiddle here.

Because this is bind to the global object by default (in browser it's window).
You can try pass this to myFunction() like this: myFunction(this). And in myFunction definition: function myFunction(target) {...}, target now refers to the anchor element.