Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Wednesday, February 21, 2018

Drag the box using JQuery

<html>

<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ css/bootstrap.min.css">

    

<style type="text/css">

        #draggable { 

width: 100px; 

height: 60px; 

padding: 0.5em;

border: 1px solid;

background-color: orange;

}

        .box{

            width: 50%;

            height: auto;

            border: 1px solid black;

            padding: 10px;

            margin-bottom: 10px;

        }

body{

   padding:20px;

}

</style>

    <script>

        $(function() {

            var thHeight = $("table#demo-table th:first").height();

            $("table#demo-table th").resizable({

                handles: "e",

                minHeight: thHeight,

                maxHeight: thHeight,

                minWidth: 40,

                resize: function (event, ui) {

                    var sizerID = "#" + $(event.target).attr("id") + "-sizer";

                    $(sizerID).width(ui.size.width);

                }

            });

        });


        $( function() {

            $( "#draggable" ).draggable({ axis: "x" });


            $( "#draggable" ).draggable({ containment: "parent" });

        } );

    </script>


</head>

<body>

<div class="box">

<div id="draggable" class="ui-widget-content">

    <span>Draggable Box</span>

</div>

</div>

</body>

</html>

Output:




No comments:

Post a Comment

More Posts

Subscribe Us

FOLLOW