Created
April 10, 2019 01:59
-
-
Save jinan-kordab/48ea0e2d2decf4c0842b1ab060d32119 to your computer and use it in GitHub Desktop.
Responsive Design Draggable and Droppable functionality - by Jinan Kordab - demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <!-- DESIGN BY JINAN KORDAB --> | |
| <!-- DATE: APRIL 9, 2019 --> | |
| <!-- BOOTSTRAP RESPONSIVE DESIGN - FRONT END ONLY --> | |
| <!-- DEMO USAGE OFDRAG AND DROP FUNCTIONALITY. --> | |
| <!-- I FOUND THAT JAVASCRIPT IS THE BEST OPTIONS O FAR FOR HANDLING DRAG AND DROP SINCE THERE ARE MANY THIRD PARTY LIBRARIES AS WELL --> | |
| <!-- THIS PAGE SHOWS AN OPTIONS MENU,WITH BOOTSTRAP FOR RESPONSIVE DESIGN, WHEN DROPPED INTO THE MIDDLE CONTAINER,TRIGGERS THE droppable EVENT. --> | |
| <!-- INSIDE droppable EVENT,WE CAN ADD AJAX CALLS TO BACK END OT TO ASP.NET MVC CONTROLLERS AND ACTION RESULTS TO GET DATA FROMD ATA BASE --> | |
| <!-- YOU CAN USE THIS CODE AS YOU WISH --> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Jinan Kordab Draggable with Boostrap Example</title> | |
| <link rel="stylesheet" href="bootstrap.min.css"> | |
| <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> | |
| <script src="bootstrap.min.js"></script> | |
| <script> | |
| $( function() { | |
| $( "#draggable" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>TIPS DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable2" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>SALES DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable3" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>MONTHLY DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable4" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>WEEKLY DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable5" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>YTD DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable6" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>OPTION ONE DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable7" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>OPTION TWO DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable8" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>OPTION THREE DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable9" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>OPTION FOUR DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable10" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>OPTION FIVE DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#draggable11" ).draggable({ | |
| opacity: 0.35, | |
| containment: "#droppable", | |
| revert: true, | |
| helper: "clone", | |
| helper: function( event ) { | |
| return $( "<div class='badge badge-success'>OPTION SIX DETAILS</div>" ); | |
| }, | |
| snap: "#droppable", | |
| start: function() { | |
| }, | |
| drag: function() { | |
| }, | |
| stop: function() { | |
| } | |
| }); | |
| $( "#droppable" ).droppable({ | |
| drop: function( event, ui ) { | |
| var options = {}; | |
| var draggable = ui.draggable; | |
| //alert(draggable.attr('id')); | |
| if(draggable.attr('id') == "draggable") | |
| { | |
| $( "#draggable" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable2") | |
| { | |
| $( "#draggable2" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable2" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable3") | |
| { | |
| $( "#draggable3" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable3" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable4") | |
| { | |
| $( "#draggable4" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable4" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable5") | |
| { | |
| $( "#draggable5" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable5" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable6") | |
| { | |
| $( "#draggable6" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable6" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable7") | |
| { | |
| $( "#draggable7" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable7" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable8") | |
| { | |
| $( "#draggable8" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable8" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable9") | |
| { | |
| $( "#draggable9" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable9" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable10") | |
| { | |
| $( "#draggable10" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable10" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| else if(draggable.attr('id') == "draggable11") | |
| { | |
| $( "#draggable11" ).effect( "bounce", options, 500, callback ); | |
| //$( "#draggable11" ).parent().innerText = $( "#draggable" ).innerText; | |
| } | |
| } | |
| }); | |
| } ); | |
| function callback() { | |
| }; | |
| </script> | |
| <style type="text/css"> | |
| .col-sm.border.rounded.border-warning:hover { | |
| border: 1px solid #6c757d !important; | |
| } | |
| .block { | |
| /* display: block; */ | |
| width: 100%; | |
| height: 45px; | |
| /* border: none; */ | |
| /* background-color: silver; */ | |
| /* padding: 0px 0px; */ | |
| /* font-size: 13px; */ | |
| /* cursor: pointer; */ | |
| /* text-align: center; */ | |
| /* color: white; */ | |
| font-weight: bold; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-info "> | |
| <a class="navbar-brand text-white" href="#">LOGO</a> | |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span></button> | |
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
| <ul class="navbar-nav mr-auto"> | |
| <li class="nav-item active"><a class="nav-link text-white" href="#">HOME | |
| <span class="sr-only">(current)</span></a> </li> | |
| <li class="nav-item"><a class="nav-link text-white" href="#">CONTACT</a> | |
| </li> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| SERVICES </a> | |
| <div class="dropdown-menu" aria-labelledby="navbarDropdown"> | |
| <a class="dropdown-item" href="#">SERVICE A</a> | |
| <a class="dropdown-item" href="#">SERVICE B</a> | |
| <div class="dropdown-divider"> | |
| </div> | |
| <a class="dropdown-item" href="#">SERVICE C</a> </div> | |
| </li> | |
| <li class="nav-item"><a class="nav-link disabled text-white" href="#">Disabled</a> | |
| </li> | |
| </ul> | |
| <form class="form-inline my-2 my-lg-0"> | |
| <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> | |
| <button class="btn btn-outline-warning my-2 my-sm-0 text-white" type="submit"> | |
| Search</button> | |
| </form> | |
| </div> | |
| </nav> | |
| <hr> | |
| <div class="container-fluid" id="mainMenu"> | |
| <div class="row"> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important;"> | |
| <div id="draggable" class="btn btn-warning block" style="width:100%"> | |
| TIPS</div> | |
| </div> | |
| <div class="col-sm border rounded " style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable2" class="btn btn-warning block" style="width:100%"> | |
| SALES</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable3" class="btn btn-warning block" style="width:100%"> | |
| MONTHLY</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable4" class="btn btn-warning block" style="width:100%"> | |
| WEEKLY</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable5" class="btn btn-warning block" style="width:100%"> | |
| YTD</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable6" class="btn btn-warning block" style="width:100%"> | |
| OPTION</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable7" class="btn btn-warning block" style="width:100%"> | |
| OPTION</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable8" class="btn btn-warning block" style="width:100%"> | |
| OPTION</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable9" class="btn btn-warning block" style="width:100%"> | |
| OPTION</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable10" class="btn btn-warning block" style="width:100%"> | |
| OPTION</div> | |
| </div> | |
| <div class="col-sm border rounded" style="padding-left:0px !important; padding-right:0px !important;padding-bottom:0px !important"> | |
| <div id="draggable11" class="btn btn-warning block" style="width:100%"> | |
| OPTION</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-fluid" id="droppable" style="border:2px solid red;width:100%;height:98%;margin-top:5px"> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment