Click here to Skip to main content
15,880,608 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
CSS
.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;
    }

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

JavaScript
/** 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();


What I have tried:

I've tried searching for a solution all over the web, and I couldn't find anything that is specific to what I'm looking for. I tried adding " data-native-menu="false" ",I tried removing some "div" elements. I just don't understand as to why it works on Desktops but it doesn't work on mobile devices. At least it doesn't work on my LG Stylo 6.

What other methods can I try?
Posted
Comments
Richard Deeming 9-Aug-21 4:25am    
"It doesn't work" tells us precisely nothing.

Click the green "Improve question" link and update your question with a clear and complete description of the problem. Include the full details of any errors, and remember to indicate which line of code they relate to.
juliocoder 9-Aug-21 4:33am    
My apologies... I meant to say that when I try to touch the select drop down menu from my mobile device, the options don't get displayed. But it works perfectly on a desktop.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900