fredleblanc
Drag Drop Enabled and having button in div
Hi
seems that android/iphone chrome and safarfi cant fire the onclick function
but it is working fine in default android browser
Yeah, I'm seeing the same issue. If enableDrag is set to true onclick handlers does not get triggered.
Same issue,
If enableDrag : true, clickToFocus: false or enableDrag : false, clickToFocus: true
links on: Desktop: Chrome/Firefox/Safari OK iOS 6+: Safari OK Android: Native Browser/Chrome NOT WORK
I think, maybe i messed all with another js on the project, but i make another html only with roundabout but the problem still there, on Android devices links don't work.
This JS is really good, thanks you.
HTML Sample for test:
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>index</title>
<meta name="description" content="">
<meta name="author" content="Mauricio Antúnez">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<style>
.roundabout-holder {
list-style: none;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
}
.roundabout-moveable-item {
height: 60px;
width: 60px;
cursor: pointer;
background-color: #ccc;
border: 1px solid #999;
}
.roundabout-moveable-item a {
height: 60px;
width: 60px;
display:block;
background: black;
}
.roundabout-in-focus {
cursor: auto;
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.roundabout.min.js"></script>
<script src="js/jquery.roundabout-shapes.min.js"></script>
<script src="js/jquery.event.drag-2.2.js"></script>
<script src="js/jquery.event.drop-2.2.js"></script>
<script>
$(document).ready(function() {
$('ul').roundabout({
shape : 'square',
clickToFocus : false,
responsive : true,
enableDrag : true
});
});
</script>
</head>
<body>
<div>
<header>
<h1>index</h1>
</header>
<ul>
<li><a href="http://www.google.cl"></a> </li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
