Sometimes we need drag and drop functionality on websites. Maybe we need to drag one element into another element, or just reorder something just by dragging.
I researched a lot of libraries open source available online, and came to conclusion that JQuery library for Draggable and Droppable is the best so far. Because its methods are very simple, or event handlers for drag and drop. Besides, many other libraries build on top of this JQuery library.
Also because it is very simple to use and implement.
Here is the source code for the HTML page I created. video follows it:
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> |
Thoughts on Programming 