Comments (10)
Bernardo-Castilho
commented on August 13, 2024
1
Sorry, I tried again and it really didn't work with touch. I must have been dreaming, might have tested with the mouse and forgotten the problem was with touch...
I did a little quick research on this and found some suggestions, but none that worked so far.
I will look around some more to see if there's a way around this problem.
Please accept my sincere apologies for the false/mistaken claim that it was working.
from dragdroptouch.
Bernardo-Castilho
commented on August 13, 2024
I believe dragdroptouch should work exactly like regular drag drop.
This link discusses how to do html5 drag drop between apps and windows:
https://stackoverflow.com/questions/3694631/html5-drag-and-drop-between-windows
I hope it's helpful.
from dragdroptouch.
headwindtrend
commented on August 13, 2024
thank you for your reply. the referred stackoverflow post was talking about "drag&drop across windows" with mouse, i guess. yes, "drag&drop across windows" with mouse is working fine. my problem is, while dragdroptouch enabled me to drag&drop by touch-operation within a webpage, it doesn't seem to let me drag&drop across winfows by touch-operation. at least it doesn't work in my android smartphone that i had tried it out. whereas, on the same smartphone, "drag&drop across windows" with mouse is working fine. i hope i have illustrated the scenario a little better.
from dragdroptouch.
Bernardo-Castilho
commented on August 13, 2024
Like I said, I think if it works with the mouse then it should work with touch as well. Both use the same HTML5 events/methods/properties.
If that is not the case, please feel free to post a sample and I'll be happy to look at it.
Thanks.
from dragdroptouch.
headwindtrend
commented on August 13, 2024
right. please load the HTMLs below into different android browser windows. and see if you can drag the testing element from window A to window B by touch-operation. i can do it with mouse, but failed by touch-operation as supposed been enabled by dragdroptouch.
<script id="DragDropTouch" src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>
window A<br><br>
<a href="#"><svg><rect width="300" height="200" style="cursor:pointer;fill:green"/><text x="50%" y="50%" dy=".3em" text-anchor="middle" style="font:bold 20px sans-serif;fill:white">testing</text></svg></a>
<script id="DragDropTouch" src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>
<body ondragover="event.preventDefault()" ondrop="this.innerText=event.dataTransfer.getData('text/plain');">window B</body>
thanks.
from dragdroptouch.
Bernardo-Castilho
commented on August 13, 2024
Thanks for posting the sample.
I think I see what the problem is. You are using the ondragover and ondrop properties of the body element.
The DragDropTouch library does not call those methods when emulating the drag drop events. Instead, it raises regular events which should be handled with regular event listeners.
Also, it seems the code you sent relies on the fact that HTML5 sets the text content of the drag event automatically, which is also something the DragDropTouch library does not do.
The code below has a few minor changes that allow it to work with mouse and/or with touch:
<html>
<head>
<script id="DragDropTouch" src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>
<script>
document.addEventListener("dragover", e => {
e.preventDefault();
});
document.addEventListener("drop", e => {
e.preventDefault();
document.body.innerText = e.dataTransfer.getData("text/plain");
});
document.addEventListener("dragstart", e => {
e.dataTransfer.setData("text/plain", e.target.href);
//e.dataTransfer.setData("text/plain", "whatever you want");
});
</script>
</head>
<body>
<p>
window A
</p>
<p>
<a href="#">
<svg>
<rect width="300" height="200" style="cursor:pointer;fill:green"/>
<text x="50%" y="50%" dy=".3em" text-anchor="middle" style="font:bold 20px sans-serif;fill:white">testing</text>
</svg>
</a>
</p>
<p>
window B
</p>
</body>
</html>
The code adds some event listeners to the dragover, drop, and dragstart events. dragstart is used to set the text/plain content of the data transfer object. The other events do the same thing as the original handlers did.
I hope this helps, and thanks again for providing the sample code.
from dragdroptouch.
headwindtrend
commented on August 13, 2024
you can drag&drop across window by touch-operation with the html you provided above? i still cannot, my result is same as before, mouse can, touch cannot. im using a samsung galaxy device with google chrome for the testing. don't know if this makes a difference, though unlikely per normal guess.
from dragdroptouch.
headwindtrend
commented on August 13, 2024
i also tried it on win10 msedge, got the same result, mouse can, touch cannot.
from dragdroptouch.
Bernardo-Castilho
commented on August 13, 2024
Strange. I tried this in Chrome and also in Firefox
I was able to drag from one browser to the other, and also from either browser to other instances of the same browser.
Strange...
from dragdroptouch.
headwindtrend
commented on August 13, 2024
if you have a working one, i should be able to make it work as well. just need to find out what makes the difference. i shot a video to show you what did it look like when i drag&drop it by touch, and by mouse thereafter. see if it can make you think of any suspects of the problem. thanks.
dragdroptouch_testing.webm
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
- 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.