Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Draggable and resizable a block using HTML5 and Javascript

    @siddharth.shahi
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 470
    Comment on it

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

    HTML:

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

    CSS:

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

    Script:
    Draggable:

    1.     $("#accordion").draggable();
    2.     setTimeout(function(){
    3.        $(".ui-resizable-e,.ui-resizable-s").hide();
    4.     }, 500);

    Resizable:

    1. $( "#accordion" ).resizable({
    2.       stop: function(event, ui) {
    3.           var width = ui.size.width;
    4.           var height = ui.size.height;
    5.           $("#accordion .panel-body").width(width);
    6.           $("#accordion .panel-body").height(height - 35);
    7.           if($("#accordion .panel-body").width() < 250){
    8.             $("#accordion .panel-body").css({"font-size":"12px"});
    9.           } else {
    10.             $("#accordion .panel-body").css({"font-size":"16px"});
    11.           }
    12.       }
    13.     });
    HTML5 Javascript JQuery Drag and Drop Blog
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: