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:




1 comment:

  1. At June Florist we understand the significance of perfection alongside simplicity, this is why we have been trying since 1988 to make sure that the perfect arrangement and the perfect environment does not lack that magnificent and satisfying effect of a Flower. We have been trusted to handle several Top Notch international events, our services are world class and without blemish. We have been providing floral decorations for classic events and world Festivals.

    hand bouquet singapore
    flower delivery singapore
    hand bouquet
    online flower delivery singapore
    hand bouquet delivery singapore
    florist singapore
    flower in a box singapore
    bouquet delivery singapore
    flower bouquet delivery singapore
    flowers online singapore
    mother's day singapore

    ReplyDelete

More Posts

FOLLOW