| 1 |
/* |
| 2 |
Hasan Yüksektepe |
| 3 |
Version : 1.0.0 |
| 4 |
Website: hayatikodla.net |
| 5 |
|
| 6 |
12.11.2021 |
| 7 |
Multiselect Sortable |
| 8 |
*/ |
| 9 |
(function($){ |
| 10 |
|
| 11 |
$.fn.multiselect_sortable = function(options){ |
| 12 |
|
| 13 |
var defaults = { |
| 14 |
selectable:{ |
| 15 |
title:'Selectable' |
| 16 |
}, |
| 17 |
selection :{ |
| 18 |
title:'Selection' |
| 19 |
} |
| 20 |
}; |
| 21 |
|
| 22 |
var me = this; |
| 23 |
|
| 24 |
var select_name = me.attr('name'); |
| 25 |
var classes = $(me).attr('class'); |
| 26 |
|
| 27 |
var select = document.createElement('select'); |
| 28 |
select.setAttribute('multiple', ''); |
| 29 |
select.setAttribute('name', select_name+'[]'); |
| 30 |
select.setAttribute('class', classes); |
| 31 |
select.setAttribute('style', "display:none"); |
| 32 |
|
| 33 |
var settings = $.extend(true, defaults, options); |
| 34 |
var parent = this.parent(); |
| 35 |
|
| 36 |
$(me).attr('class', ''); |
| 37 |
this.addClass('multiselect_sortable_hide'); |
| 38 |
$(me).prop('disabled', true); |
| 39 |
|
| 40 |
var selectable = ''; |
| 41 |
var selection = ''; |
| 42 |
$.each($(' option', me), function(i, e){ |
| 43 |
|
| 44 |
var name = $(e).html(); |
| 45 |
var value = $(e).attr('value'); |
| 46 |
var selected = $(e).attr('selected'); |
| 47 |
var disabled = $(e).attr('disabled'); |
| 48 |
var data = $(e).data(); |
| 49 |
var element_data_list = ''; |
| 50 |
var create_id = 'id'+Math.floor(Math.random()*999); |
| 51 |
|
| 52 |
$(e).attr('data-unit_id', create_id) |
| 53 |
|
| 54 |
$.each(data, function(i, e){ |
| 55 |
element_data_list += 'data-'+i+'="'+e+'"'; |
| 56 |
}) |
| 57 |
|
| 58 |
if(selected!=undefined){ |
| 59 |
selection += '<li class="select_li '+(disabled?'disabled':'')+'" data-uniq_id="'+create_id+'" data-name="'+name+'" data-value="'+value+'" '+element_data_list+'>'+name+'</li>'; |
| 60 |
} |
| 61 |
else{ |
| 62 |
selectable += '<li class="select_li '+(disabled?'disabled':'')+'" data-uniq_id="'+create_id+'" data-name="'+name+'" data-value="'+value+'" '+element_data_list+'>'+name+'</li>'; |
| 63 |
} |
| 64 |
}); |
| 65 |
|
| 66 |
var content = ` |
| 67 |
<div class="multiselect_sortable_content"> |
| 68 |
<div class="selection"> |
| 69 |
<div class="selection_title">${settings.selection.title}</div> |
| 70 |
<ul class="selection_content sortable"> |
| 71 |
${selection} |
| 72 |
</ul> |
| 73 |
</div> |
| 74 |
<div class="selectable"> |
| 75 |
<div class="selectable_title">${settings.selectable.title}</div> |
| 76 |
<ul class="selectable_content"> |
| 77 |
${selectable} |
| 78 |
</ul> |
| 79 |
</div> |
| 80 |
</div> |
| 81 |
`; |
| 82 |
|
| 83 |
$(parent).append(content) |
| 84 |
|
| 85 |
$(document).on('click', '.selectable_content .select_li', function(){ |
| 86 |
const html = $(this)[0].outerHTML; |
| 87 |
$('.selection_content').append(html); |
| 88 |
$(this).remove(); |
| 89 |
sortable_selectbox(); |
| 90 |
}); |
| 91 |
|
| 92 |
$(document).on('click', '.selection_content .select_li', function(){ |
| 93 |
var html = $(this)[0].outerHTML; |
| 94 |
$('.selectable_content').append(html); |
| 95 |
$(this).remove(); |
| 96 |
sortable_selectbox(); |
| 97 |
}); |
| 98 |
|
| 99 |
$(".sortable").sortable({ |
| 100 |
connectWith:"ul", |
| 101 |
axis :'y', |
| 102 |
start :function(e){ |
| 103 |
sortable_selectbox(); |
| 104 |
}, |
| 105 |
change :function(e){ |
| 106 |
sortable_selectbox(); |
| 107 |
}, |
| 108 |
update :function(e){ |
| 109 |
sortable_selectbox(); |
| 110 |
}, |
| 111 |
}); |
| 112 |
|
| 113 |
sortable_selectbox(); |
| 114 |
|
| 115 |
function sortable_selectbox(){ |
| 116 |
$('.multiselect_sortable_content select option').remove(); |
| 117 |
$('.selection_content .select_li').each(function(i, e){ |
| 118 |
|
| 119 |
var value = $(e).data('value'); |
| 120 |
if(value!==undefined){ |
| 121 |
|
| 122 |
var opt = document.createElement("option"); |
| 123 |
opt.text = value; |
| 124 |
opt.value = value; |
| 125 |
opt.selected = true; |
| 126 |
|
| 127 |
//var MSS = document.createElement("input"); |
| 128 |
//MSS.setAttribute("type", "hidden"); |
| 129 |
//MSS.setAttribute("name", select_name+"[]"); |
| 130 |
//MSS.setAttribute("value", value); |
| 131 |
//MSS.setAttribute("class", classes); |
| 132 |
select.appendChild(opt); |
| 133 |
|
| 134 |
//$('.multiselect_sortable_content').append(MSS) |
| 135 |
} |
| 136 |
|
| 137 |
}) |
| 138 |
|
| 139 |
$('.multiselect_sortable_content').append(select) |
| 140 |
|
| 141 |
} |
| 142 |
} |
| 143 |
|
| 144 |
}(jQuery)); |
