Giter Club home page Giter Club logo

Comments (3)

Bernardo-Castilho avatar Bernardo-Castilho commented on August 13, 2024

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

from dragdroptouch.

ntnsndr avatar ntnsndr commented on August 13, 2024

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.

from dragdroptouch.

Bernardo-Castilho avatar Bernardo-Castilho commented on August 13, 2024

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!

from dragdroptouch.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.