jquery-ui-touch-punch
jquery-ui-touch-punch copied to clipboard
Published
20 hours ago •
furf
furf
Dynamic loaded elements are not draggable
Elements loaded after events are not draggable.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Title</title>
<meta name="description" content="">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<main>
<div>Drag me!</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src='touchpunch.js'></script>
<script src='js.js'></script>
</body>
</html>
$( document ).ready(function() {
/**
* orientationchange
*/
$(window).on('orientationchange', function(e){
// is not draggable
$('main').append('<div>Orientationchange Result</div>');
});
$('main > div:eq(0)').click(function(){
// is not draggable
$('main').append('<div>Click Result</div>');
});
/**
* draggable
*/
$('div').draggable({
cursor: 'pointer'
});
});
This is not an issue with touch-punch (which turns touch gestures into mouse movements), but more to do with how jquery-ui works.
Basically, you have to re-assert the draggable after adding elements so far as I know
Thanks... This works:
$( document ).ready(function() {
/**
* orientationchange
*/
$(window).on('orientationchange', function(e){
$('main').append('<div>Orientationchange Result</div>');
makeItDraggable();
});
$('main > div:eq(0)').click(function(){
$('main').append('<div>Click Result</div>');
makeItDraggable();
});
/**
* draggable
*/
makeItDraggable();
function makeItDraggable(){
$('main > div').draggable({
cursor: 'pointer'
});
}
});
The only problem is that you can then get multiple draggable events on existing div elements. You should ideally use something like:
$( document ).ready(function() {
/**
* orientationchange
*/
$(window).on('orientationchange', function(e){
$('main').append('<div c;lass="addDraggable">Orientationchange Result</div>');
makeItDraggable();
});
$('main > div:eq(0)').click(function(){
$('main').append('<div c;lass="addDraggable">Click Result</div>');
makeItDraggable();
});
/**
* draggable
*/
makeItDraggable();
function makeItDraggable(){
$('main > div. addDraggable').draggable({
cursor: 'pointer'
});
$('main > div. addDraggable').removeClass('addDraggable');
}
});