Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Draggable and resizable a block using HTML5 and Javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 427
    Comment on it

    If you want your block draggable and resizable, the following code will help you for the same:


    <section class="map">
            <div class="container-fluid">
              <div class="this-week panel-group dayListing" id="accordion" style="position:absolute; overflow:hidden;" >
              <h1 style="padding:10px; background:#ddd;" >Drag me</h1>
                <div class="drop-box panel-body"data-mcs-theme="dark">
                    <li>Separated link 1</li>
                    <li>Separated link 2</li>
                    <li>Separated link 3</li>
                    <li>Separated link 4</li>
                    <li>Separated link 5</li>
                    <li>Separated link 6</li>
                    <li>Separated link 7</li>
                    <li>Separated link 8</li>
                    <li>Separated link 9</li>
                    <li>Separated link 10</li>
                    <li>Separated link 11</li>
                    <li>Separated link 12</li>
                    <li>Separated link 13</li>
                    <li>Separated link 14</li>


    #accordion .panel-body{ height: 330px;}
    .dayListing {background: #fff;box-shadow: 1px 1px 18px #666; position: absolute;right: 70px;top: 40px;width: 250px;}


        }, 500);


    $( "#accordion" ).resizable({
          stop: function(event, ui) {
              var width = ui.size.width;
              var height = ui.size.height;
              $("#accordion .panel-body").width(width);
              $("#accordion .panel-body").height(height - 35);
              if($("#accordion .panel-body").width() < 250){
                $("#accordion .panel-body").css({"font-size":"12px"});
              } else {
                $("#accordion .panel-body").css({"font-size":"16px"});

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: