I want to use this drag and drop function also on mobile devices but when I run it on my mobile phones it doesn't work.
Here is the code:
copy = 1;
$('.dragArea img').on('dragstart',function(e) {
console.log('dragge it!',e);
e.originalEvent.dataTransfer.setData("text",e.target.id);
}).on('dragend',function(e) {
console.log('dragged',e);
});
$('.drop-field').on('dragover',function(e) {
//console.log('dragover',e);
e.preventDefault();
}).on('drop',function(e) {
e.preventDefault();
//window.status = 'successfully dragged';
console.log('drop',e,window.status);
data = e.originalEvent.dataTransfer.getData("text");
$(this).append(copy ? $('#' + data).clone() : $('#' + data));
});
.drop-field {
border: 4px #287CA1 dashed;
display: inline-block;
min-width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragArea">
<img src="http://lorempixel.com/image_output/city-q-g-640-480-4.jpg" width="50" height="50" alt="logo" id="logo" />
</div>
<div class="dropArea">
<span class="drop-field"></span>
<span class="drop-field"></span>
</div>
Probably because the drag and drop functions use mousedown and mouseup, whose are not mobile compliant.
Here is a linked topic : How to get jquery dragging working on mobile devices? where the suggested solution to use jQuery UI Touch Punch (which convert click events to touch events).
Related
I couldn't find a more direct way to ask people who are familiar with hammer.js so i'm posting here.
So i've been working on a web app with 8thwall using hammer.js for swiping/scrolling. i've been testing it on my samsung 10 and only now testing on the iphones. The swiping/scrolling has been working fine with my samsung 10 but it doesnt work at all with iphones that i could get my hands on. I've tried iphone 8plus, iphone xr, iphone 6s. Please advise on what i need to do. Thank you.
my codes :
//SCROLLING FUNCTION
AFRAME.registerComponent('scroll-lines', {
init: function(){
var container = document.getElementById("scrolling-container");
var content = document.getElementById("button-collections");
var hammer = new Hammer(container);
var initialX = 0;
var deltaX = 0;
var offset = initialX + deltaX;
hammer.on("panleft panright", function(ev) {
deltaX = ev.deltaX;
offset = initialX + deltaX;
container.scroll(-offset, 0);
});
Hammer.on(container, "mouseup", function(e) {
initialX = offset;
});
}
})
<!--SCROLLING BUTTONS-->
<!--IN ORDER FOR THESE TO BE DISPLAYED NEED TO STYLE THE Z-INDEX: 10. REFER style.css PAGE-->
<div id="scrolling-container">
<div id="button-collections">
<div id="box-all" class="cantap"></div>
<div id="box-seremban" class="cantap"></div>
<div id="box-klang" class="cantap"></div>
<div id="box-ampang" class="cantap"></div>
<div id="box-petaling" class="cantap"></div>
<div id="box-kj" class="cantap"></div>
<div id="box-ekspres" class="cantap"></div>
<div id="box-transit" class="cantap"></div>
<div id="box-monorail" class="cantap"></div>
<div id="box-kajang" class="cantap"></div>
<div id="box-skypark" class="cantap"></div>
</div>
</div>
The CSS:
#scrolling-container{
z-index: 10;
position: absolute;
display: flex;
top: 55%;
width: 100%;
cursor: pointer;
background-color: red;
}
#button-collections{
display: flex;
flex-direction: horizontal;
overflow: scroll;
height: 150px;
padding-top: 170px;
width: 100%;
}
UPDATE: I tried the suggestions below but they did not resolve the issue. I found that if i used var hammer = new Hammer(container); it works for android not iOS but if i use var hammer = new Hammer(content); it works for both but at the mouseup function i am not able to scroll to the end for both iOS and android. using panleft, panright, panend
UPDATE 2: So since hammerjs is sorta working on the iphone, my question is sort of answered. closed question. opened a new follow up question for current situation
Well are you sure you want to use pan? Pan is for dragging basically. Swipe is called swipe in hammer.js. It could be that on android the correct gesture is triggered, but not on iphone. If you move your finger fast, its a swipe, and won't be recognized as a pan. Also instead of mouseup you should use panend probably (because maybe android fires mouseup, and iphone doesn't).
Possible events with pan are:
panstart
panmove
panend
pancancel
panleft
panright
panup
pandown
Try to use swipeleft and swiperight events instead of pan events.
Without a cursor defined on the elements iOS does not fire the mousedown or mouseup client-side events which are needed for swipe. See How to make my 'click' function work with iOS.
Assign a class ios-device to your <body> when you detect iOS and use the following style.
body.ios-device {
cursor: pointer !important; /* iOS click events don't fire without this! */
}
I've this function perfectly working on chrome and firefox (both on macOs). I've checked it in safari 10.03(macOs) and it fire on mouseenter but not on mouseleave.
Function:
$(document).ready(function(){
$("#mazzo").on("mouseenter", ".pick", function() {
var immagine = $(this).data('immagine');
$("#anteprima").attr("src", immagine);
});
$("#mazzo").on("mouseleave", ".pick", function() {
$("#anteprima").removeAttr("src");
console.log("Mouse out");
});
});
HTML:
<div id="peranteprima">
<img id="anteprima" src="immagini/void.png" alt="">
</img>
</div>
<div id="mazzo">
<div class="pick" id="0" data-immagine="immagini/12345.png">
<img src="immagini/pick.png" alt="immagine box" class="box">First pick
</div>
</div>
CSS:
#peranteprima {
position: relative;
margin-left: -213px;
}
#anteprima {
position: fixed;
bottom: 75%;
top: 0%;
max-width: 215px;
height: 322px;
z-index: 10;
}
I've tried to set .attr("src", "") but the behaviour on safari it's the same. I've also tried mouseout but with no luck.
The mouseleave event reference say this:
Safari 7 fires the event in many situations where it's not allowed to,
making the whole event useless. See bug 470258 for the description of
the bug (it existed in old Chrome versions as well). Safari 8 has
correct behavior
I've checked many times for a solution here and on other sites but I've found only unanswered question or nothing that fit my problem right now.
There's a way to make it work on safari?
I'm using the fullscreen.js script and in one of my screens I will have a fullscreen Vimeo video. Apparently this will cause issues in FF and prevents me from scrolling up or down as soon as I reach the screen with the video. The issue was submitted to the GitHub page of the script but the author dismissed it as it's a FF issue (https://github.com/alvarotrigo/fullPage.js/issues/803).
I'm using all this with foundation CSS for the responsive video:
<div class="flex-video widescreen vimeo">
<iframe src="<?php the_sub_field('video') ?>"
width="400"
height="225"
frameborder="0"
webkitAllowFullScreen
mozallowfullscreen
allowFullScreen></iframe>
</div>
The bug is this one: https://bugzilla.mozilla.org/show_bug.cgi?id=779286 but I don't see that it was solved on FF 36 on Mac. The issue is not happening on chrome either.
Here is an example of the issue by someone else on the GitHub thread: http://jsbin.com/tunove/1/edit?html,output
The Issue:
The Mozilla bug you are looking at actually refers to the fullscreen mode API, an unrelated API that was fixed. I think the bug report you are looking for is this one:
Bug 1084121 - Mouse wheel event is captured by iframe and not propogated.
Steps to reproduce:
I have a div in which I manually capture mousewheel events, and use
that to scroll the div. Inside of this div, I have an embedded youtube
video, in an iframe.
Actual results:
While scrolling, if the mouse is over the iframe, scrolling no longer
works, because all mouse events, including mouse wheel events, are
captured by the iframe, and are not sent to the parent window.
Expected results:
The mouse wheel event should have been propagated to the parent
window. This is the behavior in chrome and safari.
Since the iframe is on a different domain, there does not appear to be
any feasible workaround for this.
This bug report is still open, and does not appear to be in the process of being implemented.
Also, according to the bug report, this behavior is not defined by any specification.
For what it's worth, I gave this bug report a vote to increase the importance. I agree, this is a user experience problem.
Workarounds:
Unfortunately, as far as directly fixing the wheel event issue goes, the suggestions in that GitHub issue are about all we have for cross-origin iframes. If the framed content were on the same domain or otherwise under your control, you could add another event listener inside the iframe, but Same-Origin Policy prevents this cross-domain.
The only options available to prevent the iframe from stealing the wheel events for cross-origin frames are:
Cover most or all of the iframe with transparent divs.
Use pointer-events: none; on the iframe. This will also prevent clicking on the video at all, so it has the same effect as covering the entire video with a transparent div.
Other Options:
This issue is apparently limited to the wheel events as it is possible to scroll a parent document while scrolling over an iframe.
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E" style="width: 100%; height: 100px;"></iframe>
<div style="background: red; width: 20px; height: 5000px;"></div>
fullPage.js is not structured this way, but if a parent element to the iframe were actually a scrollable element, it would be possible to listen for the scroll event and react to that.
It's a little shaky, but here's an example of something similar using the scroll event instead of the wheel event.
Example (JSFiddle):
var autoScrolling = false;
$('.wrap').on('scroll', function(e) {
if (autoScrolling) {
return;
}
//Get this element and find the number of children.
var $this = $(this);
var children = $this.children('.pane').length;
//Find the height of each pane, and the current position.
var paneHeight = this.scrollHeight / children;
var position = this.scrollTop / paneHeight;
var positionRound = Math.round(position);
//Find the target position.
var positionOff = position - positionRound;
var toShow = null;
if (positionOff < 0) {
toShow = positionRound - 1;
}
else if (positionOff > 0) {
toShow = positionRound + 1;
}
//If scrolling to a new pane, find the next one.
if (toShow !== null) {
autoScrolling = true;
$this.animate({
scrollTop: paneHeight * toShow
}, {
duration: 1000,
complete: function() {
setTimeout(function() {
autoScrolling = false;
}, 500);
}
});
}
});
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
overflow: auto;
}
.pane {
width: 100%;
height: 100%;
position: relative;
}
iframe {
background: white;
border: 0;
outline: 0;
display: block;
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="pane" style="background: red;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
<div class="pane" style="background: green;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
<div class="pane" style="background: blue;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
</div>
I am trying to rewrite my webpages to display properly on a smartphone. In my testing I cannot get a dropdown menu to disappear when the mouse moves out of the div of the dropdown menu. Below is my code:
<script type="text/javascript">
function expandMenu() {
document.getElementById("moreMenu").style.display = "block";
}
function hideMenu() {
document.getElementById("moreMenu").style.display = "none";
}
</script>
.......
<div class="medianfont">News - Email - Editorials -
<span style="cursor:pointer; color:blue" onclick="expandMenu()"> More</span><br />
<div id="moreMenu" style="display:none; margin-left:14em;" onmouseout="hideMenu()" onclick="hideMenu()">
History <br />
Events <br />
</div>
</div>
It works ok when testing on my desktop but in testing on my Android phone, the dropdown menu will appear but no amount of clicking will make it go away even though the links do work. So is there a way to get a dropdown menu to disappear on a smartphone similar to a desktop? I am not coding in Android, I am merely displaying the webpage on a smartphone.
There is no mouseout for mobile devices since there is no mouse.
Suggest using a mobile framework or at least reading up on the available events.
http://api.jquerymobile.com/category/events/
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events
What about using blur?
Here is a demo using blur. I tested this on an Android device.
HTML
<div id="menu" onclick="expandMenu();" onblur="hideMenu();">Menu</div>
<div id="moreMenu" tabindex="-1" onblur="hideMenu();">
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
JavaScript (No JQuery)
function expandMenu() {
document.getElementById("moreMenu").style.display = "block";
document.getElementById("moreMenu").focus();
}
function hideMenu() {
document.getElementById("moreMenu").style.display = "none";
}
CSS
#moreMenu {
width:100px;
height:400px;
border: 1px solid blue;
display: none;
outline: none;
}
#menu {
outline: none;
background: #e5e5e5;
width: 100px;
}
See jsFiddle Demo...
I have a PLUpload that I am launching in a jQueryUI modal dialog. After launching in the dialog, PlUpload's drag-and-drop still works, but clicking to launch the file browser does not.
JsFiddle of below code. The JsFiddle includes the jQuery and jQuery UI versions that my app is using:
http://jsfiddle.net/QqPLV/1/
HTML:
Open Uploader As Dialog
<div id="AddFilePopup" title="Add A File">
<div id="drop-target">After opening in a dialog clicking here does nothing, but drag and drop in Chrome still works...</div>
<div id="plupload-nohtml5">No runtime found, your browser doesn't support HTML5 drag & drop upload.</div>
<div id="plupload-filelist"></div>
</div>
CSS:
#drop-target {
border: 3px dashed #CCC;
text-align: center;
color: #999;
font-size: 16px;
padding : 50px;
cursor: pointer;
}
#debug {
margin-top: 20px;
}
#plupload-debug {
border : 1px Solid #600;
padding : 5px;
margin : 5px;
}
Javascript:
$(function () {
$('#add-file-link').click(function () {
$('#AddFilePopup').dialog({
modal: true,
width: 600
});
uploader.refresh(); //this fixes IE10 not being able to click to add files
return false;
});
initPlUpload();
});
function initPlUpload() {
uploader = new plupload.Uploader({
runtimes: 'html5',
drop_element: 'drop-target',
browse_button: 'drop-target',
max_file_size: '4mb',
upload: "upload.php"
});
uploader.bind('Init', function (up, params) {
if (uploader.features.dragdrop) {
$('#plupload-nohtml5').hide();
};
});
uploader.bind('FilesAdded', function (up, files) {
for (var i in files) {
$('#plupload-filelist').append('<div id="' + files[i].id + '">- ' + files[i].name + ' - ' + files[i].id + ' (' + plupload.formatSize(files[i].size) + ')</div>');
}
});
uploader.init();
}
I added the line
uploader.refresh();
to the click handler, and that fixed IE10, but Chrome still refuses to cooperate. Even entering uploader.refresh(); into Chrome's console does not bring the uploader's browse capability back to life...
Edit: To remove some lines that were not required to reproduce the problem and made it harder to read.
I have the same problem and there is a tweak for that. It happens when you have HTML5 as upload engine, so to solve the trick you need to add a style:
.plupload{ z-index : 99999; }
or if you prefer on the fly....
$("div.plupload").css({"z-index":99999});
This should fix your problem.
Other thing is that you are destroying the uploader before you create the window, so it won't work. if you want to execute pluploader into the dialog, I advice you to use the parameter open, so when the dialog initialize, it runs the behavior for pluploader on it.