Dynamic loaded elements are not draggable #324

ebody · 2020-01-20T21:09:18Z

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

});

The text was updated successfully, but these errors were encountered:

RWAP · 2020-01-20T21:28:23Z

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 · 2020-01-21T10:05:16Z

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 · 2020-01-21T10:09:55Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamic loaded elements are not draggable #324

Dynamic loaded elements are not draggable #324

ebody commented Jan 20, 2020

RWAP commented Jan 20, 2020

ebody commented Jan 21, 2020 •

edited

Loading

RWAP commented Jan 21, 2020

Dynamic loaded elements are not draggable #324

Dynamic loaded elements are not draggable #324

Comments

ebody commented Jan 20, 2020

RWAP commented Jan 20, 2020

ebody commented Jan 21, 2020 • edited Loading

RWAP commented Jan 21, 2020

ebody commented Jan 21, 2020 •

edited

Loading