I am creating a scenerio in which I want a ponent of drag and drop,
and I found one after some work around, which looks like the following
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
let target = ev.target;
let btnsHolder = document.getElementById("buttonsHolder")
let currentBtn;
var data = ev.dataTransfer.getData("text");
//check if there's already a button inside
if (target.children.length > 0){
currentBtn = target.children[0];
btnsHolder.appendChild(currentBtn);
}
target.appendChild(document.getElementById(data));
}
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="buttonsHolder">
<button id="test" draggable="true" ondragstart="drag(event)" width="336" height="69">button 1</button>
<button id="test2" draggable="true" ondragstart="drag(event)" width="336" height="69">button 2</button>
<button id="test3" draggable="true" ondragstart="drag(event)" width="336" height="69">button 3</button>
</div>
but the problem with the same code is,
it is working on pc, but not on mobile screen,
for testing,
after pressing
F12
clicking on toggle device toolbar will enable a mobile view,
and the same code is not working,
what can be the possible issue here?
I am creating a scenerio in which I want a ponent of drag and drop,
and I found one after some work around, which looks like the following
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
let target = ev.target;
let btnsHolder = document.getElementById("buttonsHolder")
let currentBtn;
var data = ev.dataTransfer.getData("text");
//check if there's already a button inside
if (target.children.length > 0){
currentBtn = target.children[0];
btnsHolder.appendChild(currentBtn);
}
target.appendChild(document.getElementById(data));
}
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="buttonsHolder">
<button id="test" draggable="true" ondragstart="drag(event)" width="336" height="69">button 1</button>
<button id="test2" draggable="true" ondragstart="drag(event)" width="336" height="69">button 2</button>
<button id="test3" draggable="true" ondragstart="drag(event)" width="336" height="69">button 3</button>
</div>
but the problem with the same code is,
it is working on pc, but not on mobile screen,
for testing,
after pressing
F12
clicking on toggle device toolbar will enable a mobile view,
and the same code is not working,
what can be the possible issue here?
Share Improve this question asked Sep 28, 2018 at 11:42 user10249871user10249871 1- Please check the answer of this question: stackoverflow./questions/21350874/html5-drag-drop-for-mobile – Stephan-v Commented Sep 28, 2018 at 11:54
3 Answers
Reset to default 5Some mobile devises don't listen to the drag event. To solve that you must use the touch event touchstart, touchend, touchcancel, touchleave, touchmove TouchEvent - Web APIs
// get The element on which to attach the event
var btn = document.querySelector('.btn');
// attaching each event listener
btn.addEventListener('touchstart', function(){
console.log('btn touched');
})
btn.addEventListener('touchend', function(){
console.log('btn leaved');
})
btn.addEventListener('touchmove', function(){
console.log('btn leaved');
})
btn.addEventListener('touchleave', function(){
console.log('btn moving end');
})
btn.addEventListener('touchcancel', function(){
console.log('btn moving cancel');
})<button class="btn">test</button>It might be due to the scroll action overriding. Add touch-action: none; CSS style to your .draggable class
I find this code work for mobile. https://codepen.io/deepakkadarivel/pen/LrGEdL
window.onload = function() {
// find the element that you want to drag.
var box = document.getElementById('box');
/* listen to the touchMove event,
every time it fires, grab the location
of touch and assign it to box */
box.addEventListener('touchmove', function(e) {
// grab the location of touch
var touchLocation = e.targetTouches[0];
// assign box new coordinates based on the touch.
box.style.left = touchLocation.pageX + 'px';
box.style.top = touchLocation.pageY + 'px';
})
/* record the position of the touch
when released using touchend event.
This will be the drop position. */
box.addEventListener('touchend', function(e) {
// current box position.
var x = parseInt(box.style.left);
var y = parseInt(box.style.top);
})
}
with box is the id of the draggable div
Please note that this code does not replace the code for desktop, so in my case, I have both and my draggable elements work on both