Hi All
I have some drag and drop code that allows me to reposition stuff… for example I use it with my navigation… say you have 5 lots of nav with home at position 1 and contact at position 9 you can drag contact to the top and drop it and my code runs and re-numbers everything and contact becomes position 1 then home position 2 and so on… this works perfectly on all devices (computer, pad, phone).
As part of the code I have icons that perform functions such as edit and delete.
A basic look might be:
EDITicon DELETEicon - HOME
EDITicon DELETEicon - ABOUT
EDITicon DELETEicon - INFO
EDITicon DELETEicon - SOMETHING
EDITicon DELETEicon - CONTACT
On a computer everything works fine and functions the way it should.
On a mobile device the icons won’t work… essentially it looks like the option to tap an icon/link and follow it is disabled.
Here is my script:
<script>
var length_of_elements_having_class_draggable_item = $('.droppable-area').find('.draggable-item').length;
var arr = [], i;
for(i = 0; i < length_of_elements_having_class_draggable_item; i++) { arr.push(""); }
$( init );
function init() { $( ".droppable-area" ).sortable({ connectWith: ".connected-sortable", stack: '.connected-sortable ul', update: function(event, ui) { Dropped(event, ui); } }).disableSelection(); }
function Dropped(event, ui){ var i=0; $('.droppable-area').find(".draggable-item").each(function(){ arr[i%arr.length]= this.id; i++; });
var data={sequence:arr};
$.ajax('https://www.domain.au/external/admin/website/onePage/includes/calls/moveNavAjaxCall.php', { type:'POST', data:data, dataType: 'json', timeout: 500, success: function (data,status,xhr) { console.log("successfully! Position is changed."); location.reload(); }, error: function (jqXhr, textStatus, errorMessage) { console.log("error"); location.reload(); } }); }
</script>
Do you have any idea what I need to do to make the icons/links work on a mobile device?
Thanks for any help… it’s greatly appreciated.
mrmbarnes