Dynamic loaded elements are not draggable

ebody commented 4 years ago

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'
        });

});

RWAP commented 4 years ago

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

ebody commented 4 years ago

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'
            });
        }
});

RWAP commented 4 years ago

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');
        }
});

furf / jquery-ui-touch-punch

Dynamic loaded elements are not draggable #324