I was exploring a way to use simple HTML UI components to offer UI drag and drop functionality.
This is a long term plan I was having to start real automation of my day to day work and avoid executing or editing shell scripts or puppet manifests.
JQuery offers a good simple API to allow drag and drop fuctionaltity with a lot of flexiability.
Since I am not UX-UI designer, it took me quite sometime to understand how it works and write down a working demo code for the functionality.
Below is a simple code for simple HTML table (TD elements) having draggable numbers from 1 to 8 and are only droppable inside the HTML table.
<html>
<head>
<style>
table, th, td {
border: 5px solid black;
text-align: center;
color: blue;
font-size: 300%;
font-weight: bold;
border-spacing: 10px;
}
</style>
<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>
// Make the element with id "draggable" draggable
$(function () {
count = 0;
$("#td1").draggable({revert: "invalid", containment: "document", grid: [220,210] });
$("#td2").draggable({revert: "invalid", containment: "document", grid: [220,210] });
$("#td3").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td4").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td5").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td6").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td7").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td8").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$( "#tb1" ).droppable({
drop: function(event, ui) {
Edit_dragable ( ui.draggable );
//$("#logger").html( "Dropped! ");
//$("#logger2").html( "Testing" );
}
});
function Edit_dragable( $item ) {
$item
.css( "color", "Yellow" );
var textval = 'The number is ' + $item.html() + ' & the td id was: ' + $item.attr('id');
$("#logger2").html( textval );
}
});
</script>
</head>
<table id="tb1" >
<caption>Test arrange game </caption>
<tr id="tr1">
<td id="td1" style="width:200; height:200; border-color: green"> 1 </td>
<td id="td2" style="width:200; height:200;"> 2 </td>
<td id="td3" style="width:200; height:200;"> 3 </td>
</tr>
<tr id="tr2">
<td id="td4" style="width:200; height:200"> 4 </td>
<td id="td5" style="width:200; height:200;"> 5 </td>
<td id="td6" style="width:200; height:200;"> 6 </td>
</tr>
<tr id="tr3">
<td id="td7" style="width:200; height:200;"> 7 </td>
<td id="td8" style="width:200; height:200;"> 8 </td>
<!--<td id="td9" draggable="true" ondragstart="drag(event)"> 9 </td>-->
</tr>
</table>
<p id="logger"> </p>
<p id="logger2"> </p>
The code involves some HTML, CSS styles and JQuery to be able to achieve the functionality.
Next steps is to combine this with my other code components to offer an interactive control dash board for automating my day to day tasks.
Will continue to post as I progress in this work.
This is a long term plan I was having to start real automation of my day to day work and avoid executing or editing shell scripts or puppet manifests.
JQuery offers a good simple API to allow drag and drop fuctionaltity with a lot of flexiability.
Since I am not UX-UI designer, it took me quite sometime to understand how it works and write down a working demo code for the functionality.
Below is a simple code for simple HTML table (TD elements) having draggable numbers from 1 to 8 and are only droppable inside the HTML table.
<html>
<head>
<style>
table, th, td {
border: 5px solid black;
text-align: center;
color: blue;
font-size: 300%;
font-weight: bold;
border-spacing: 10px;
}
</style>
<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>
// Make the element with id "draggable" draggable
$(function () {
count = 0;
$("#td1").draggable({revert: "invalid", containment: "document", grid: [220,210] });
$("#td2").draggable({revert: "invalid", containment: "document", grid: [220,210] });
$("#td3").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td4").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td5").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td6").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td7").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$("#td8").draggable({revert: "invalid", containment: "document", grid: [220,210]});
$( "#tb1" ).droppable({
drop: function(event, ui) {
Edit_dragable ( ui.draggable );
//$("#logger").html( "Dropped! ");
//$("#logger2").html( "Testing" );
}
});
function Edit_dragable( $item ) {
$item
.css( "color", "Yellow" );
var textval = 'The number is ' + $item.html() + ' & the td id was: ' + $item.attr('id');
$("#logger2").html( textval );
}
});
</script>
</head>
<table id="tb1" >
<caption>Test arrange game </caption>
<tr id="tr1">
<td id="td1" style="width:200; height:200; border-color: green"> 1 </td>
<td id="td2" style="width:200; height:200;"> 2 </td>
<td id="td3" style="width:200; height:200;"> 3 </td>
</tr>
<tr id="tr2">
<td id="td4" style="width:200; height:200"> 4 </td>
<td id="td5" style="width:200; height:200;"> 5 </td>
<td id="td6" style="width:200; height:200;"> 6 </td>
</tr>
<tr id="tr3">
<td id="td7" style="width:200; height:200;"> 7 </td>
<td id="td8" style="width:200; height:200;"> 8 </td>
<!--<td id="td9" draggable="true" ondragstart="drag(event)"> 9 </td>-->
</tr>
</table>
<p id="logger"> </p>
<p id="logger2"> </p>
The code involves some HTML, CSS styles and JQuery to be able to achieve the functionality.
Next steps is to combine this with my other code components to offer an interactive control dash board for automating my day to day tasks.
Will continue to post as I progress in this work.
No comments:
Post a Comment