search

drag-drop-touch-js / dragdroptouch

Polyfill that enables HTML5 drag drop support on mobile (touch) devices.
MIT License
469 stars 125 forks source link

Input field in draggable element doesn't work on mobile #32

Closed ntnsndr closed 1 year ago

ntnsndr commented 4 years ago

Thank you so much for an amazing and much-needed fix! I'm so grateful. I hope that the issue I'm raising here is helpful for further development.

An issue I've encountered is that I have an field in one of my draggable elements (which users need to be able to add text to), and currently on mobile it is not possible to edit the field. Do you have a suggestion for a workaround?

To see what I mean, go to communityrule.info/create, click the wrench-shaped button, and see the "Custom..." module that appears. Try to edit the field.

Thank you so much for considering this, and let me know if I can provide any further information.

Bernardo-Castilho commented 4 years ago

Hello.

Glad you like the component.

About your project, did you try setting the "draggable" attribute to false on the input element?

Something like this:

<span class="..." draggable="true" ondragstart="...">
  <input contenteditable="true" placeholder="Custom..." draggable="false">
  <img src="..." draggable="false">
  <a onclick="..." style="display:none">
      <img src=",,,">
  </a>
</span>

I am not sure this will fix it, but I think it might...

ntnsndr commented 4 years ago

Thanks so much for the quick reply! Darn, I just tried it, and this doesn't work. See the currently deployed version. Any other ideas?

I'm thinking about whether there's a way to make the main element draggable only when the input is no longer in use, but I'm not sure I can.

Bernardo-Castilho commented 4 years ago

OK, I just made a quick test here and this seems to work:

   <body>
        <h1>Drag-Drop Test</h1>
        <div draggable="true">
            <input placeholder="hello" id="mytext">
        </div>
        <div draggable="true">
            Hello
        </div>
        <script>
            let txt = document.getElementById('mytext');
            txt.addEventListener('focus', () => {
                txt.parentElement.setAttribute('draggable', false);
            })
            txt.addEventListener('blur', () => {
                txt.parentElement.setAttribute('draggable', true);
            })
        </script>
    </body>

It turns off the draggable attribute for the input's parent element when it gets the focus, and turns it back on when it loses it.

BTW, I also tried using a slightly modified version of the DragDropTouch component, and that worked even without the code above. You may want to give it a try:

        <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
        <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.touch.min.js"></script>

Good luck!