У меня есть следующий фрагмент кода. Столкнулся с проблемой на мобильном устройстве. Выпадающее меню вообще не работает. Я пробовал добавлять классы, пробовал @media query css для небольших устройств и ряд других вещей, которые не сработали. Я начинаю подозревать, что это может быть из-за множества слоев элементов div, которые у меня есть?
Когда я пытаюсь коснуться раскрывающегося меню на мобильном устройстве, параметры не отображаются. Такое ощущение, что выпадающее меню отключено или что-то в этом роде, но оно отлично работает на рабочем столе. Я пытаюсь найти решение, в котором реализована функция перетаскивания/сортировки.
/** Add sortable/draggable function **/
$('.column').sortable({
connectWith: '.column',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui)
{
/** Increment or decrement value based on element position **/
$('.currentposition').each(function (i) {
let numbering = ++i + 4;
$(this).val(numbering);
});
/** Display ordering priority number **/
$('.current_position').each(function (i) {
let numbering = ++i + 4;
$(this).text(numbering);
});
}
}).disableSelection();.column .dragbox{
margin:5px 2px 20px;
position: relative;
border:1px solid #946553;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox{
margin:0;
/*font-size:12px;*/
color:#fff;
border-bottom:1px solid #946553;
font-family:Verdana;
cursor:move;
padding:5px;
}
.dragbox-content{
margin:5px;
font-family:'Lucida Grande', Verdana;
font-size:0.8em;
line-height:1.5em;
}
.column .placeholder{
background: #EED5B7;
border:1px dashed #946553;
}
.opIcons
{
background-image: url('iconSpirite.gif')!important;
background-repeat: no-repeat;
float:right;
height:13px;
width:13px;
margin:0px 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="column1" class="column ui-sortable">
<div class="dragbox" id="item5">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Lastname:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95009][value]" data-form-type="address,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95009][priority]" value="5">
<label class="current_position">5</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item6">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Zipcode:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95010][value]" data-form-type="address,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95010][priority]" value="6">
<label class="current_position">6</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item7">
<div class="dragbox-content">
</div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Phone:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95011][value]" data-form-type="phone,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95011][priority]" value="7">
<label class="current_position">7</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item8">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Firstname:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95008][value]" data-dashlane-rid="dfa7f355a521619d" data-form-type="other">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95008][priority]" value="8">
<label class="current_position">8</label>
</div>
<div style="clear:both;"> </div>
</div>
</div>
Ваш вопрос сформулирован нечетко. Пожалуйста, отредактируйте свой вопрос, чтобы улучшить его читабельность.
@CannedMan, когда я пытаюсь нажать / коснуться раскрывающегося меню на мобильном устройстве, параметры не отображаются, но это отлично работает на рабочем столе. И мне нужно сохранить реализованную функцию перетаскивания/сортировки.