-1

While working with JQuery and JQuery UI for the first time I created a code snipped which allows to drag, resize and create new blocks. The code runs fine so far. The problem: New (dynamicly) created blocks don't adapt the behavior of the predefined ones (its not possible to move or resize them). So how can I assign them the same behavior as the static (predefined blocks)?

The onclick event could maybe solved by using event bubbling - but I'm not really sure about that. But what are "draggable" and "resizeable"? They aren't functions - are they??

Thanks for your support (and sorry for my bad English). :)

Code:

<!DOCTYPE html>

    <head>
        
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        
        <style>
            html, body, #container { min-height:100%; }
            #dropHere { height:400px; background-color:mediumslateblue; }
            .box { background-color:#fff; position:absolute;}
        </style>

    </head>
    
    <body>

        <div id="dropHere">
            <div id="box-1" class="box" style="width:100px; height:100px; left:50px; top:30px;"></div>
            <div id="box-2" class="box" style="width:100px; height:100px; left:120px; top:150px;"></div>
        </div>

        <button type="button" id="new" class="btn btn-outline-primary">Neue Box</button>


        <script type="text/javascript">

            $('.box')
            .click( function() {
                console.log("Klick!");
            })
            .draggable({
                containment: $('body'),
                snap:true,
                snapTolerance:60,
                snapMode:"outer",
                drag: function(){
                    console.log("Dragging");
                },
                stop: function(){
                    console.log("Dragging stopped");
                },
                revert: 'invalid'
            })
            .resizable({ 
                handles: "e, w, n, s",      
                stop: function(event, ui) {
                    console.log("Resizing stopped");
                }
            });
            

            $('#dropHere').droppable({
                accept: '.box'
            });


            $( "#new" ).click(function(e) {
                $("#dropHere").append('<div id="box-a" class="box" style="width:100px; height:100px; left:200px; top:250px; background-color:yellow;"></div>');
                e.preventDefault();
            });

        </script>
    </body>
</html>
Christian
  • 1
  • you just have to apply the ```.dragable``` and ```.resizable``` methods once you have appended the dynamic element to the body. If you have added code of your dynamically appended block, I could have added an answer to the question but i'm guessing you only need a guide on how to apply those methods to dynamic elements. Feel free to comment if you have any questions – seriously May 09 '22 at 00:05

0 Answers0