Comments (3)
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.
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.
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)
- Drag-Drop-Touch-Polyfill not working with React Grid Layout library HOT 5
- NPM package outdated HOT 3
- Image is not draggable on Canvas. HOT 7
- Script breaks with this code HOT 2
- The returned event does not have offsetX and offsetY property HOT 5
- dblclick event triggered twice on touch screens HOT 1
- Internal selections is not working HOT 9
- How to drag&drop from window A to window B in Android? HOT 10
- Breaks Bootstrap 3 dropdown menu HOT 2
- Is it possible to make this a default behaviour on desktop as well?
- Enabling the polyfill only when draggable attribute is set HOT 1
- Demo page doesn't work, and uses a "dead" copy of wijmo
- Contributing changes HOT 8
- update the npm package HOT 3
- Set up github pages for the master branch HOT 10
- Playwright install in postinstall HOT 2
- Refine the demo page
- Should not start touch-dragging when source element has draggable="false" HOT 8
- tried to tweak the `options` of your new version, not working though HOT 30
- add DEBUG to the source HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dragdroptouch.