formBuilder icon indicating copy to clipboard operation
formBuilder copied to clipboard

Published 20 hours ago • verified publisher icon kevinchappell

Drag and drop of fields does not work on touch devices (iPhone, iPad)

Open tomcodes opened this issue 3 years ago • 2 comments

Description

Drag and drop of fields to re-order them does not work on touch devices using the Basic Example provided:

<!DOCTYPE html>
<html>
<head>
    <title>Example formBuilder</title>
</head>
<body>
  <div id="fb-editor"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
  <script>
  jQuery(function($) {
    $(document.getElementById('fb-editor')).formBuilder();
  });
  </script>
</body>
</html>

:warning: it actually works on the website homepage: https://formbuilder.online/

Environment Details:

  • formBuilder Version: latest from CDN (3.8.2)
  • Browser: Firefox, Safari, Chrome latest versions
  • OS: iOS (iPad, iPhone SE)

Expected Behavior

The fields should be drag and droppable to reorder them.

Actual Behavior

The whole page is scrolling.

Steps to Reproduce

Screenshot - (optional)

tomcodes avatar Jun 09 '22 10:06 tomcodes

Try to add jquery ui sortable script it might work.

Jquery UI Sortable

ZaheerAbbasAghani avatar Jun 18 '22 07:06 ZaheerAbbasAghani

any news here?

filip-remic avatar Jul 05 '22 05:07 filip-remic

A PR https://github.com/kevinchappell/formBuilder/pull/1402 has been raised for this with a workaround for touch devices. While drag and drop is not supported by jQuery sortable the sorting of fields is allowed through field action up/down buttons

lucasnetau avatar Aug 25 '23 02:08 lucasnetau

:tada: This issue has been resolved in version 3.9.14 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] avatar Sep 12 '23 03:09 github-actions[bot]