Create the widget in attachment with Jquery & javascript. To use the widget on a page, we should only write <div class="position_widget"> </div> and $(div_id input).Val() to get its value. Upon selection of the widget value $(widget).val(), the widget should return "top left" "top center", etc.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI position method</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="jqueryui/jquery-ui.css" > <link type="text/css" rel="stylesheet" href="jqueryui/jquery-ui.structure.css"> <link type="text/css" rel="stylesheet" href="jqueryui/jquery-ui.theme.css"> <script type=text/javascript src="js/jquery.js"></script> <script type=text/javascript src="jqueryui/jquery-ui.js"></script> <script> $(function() { function position() { $(".positionableClass").position({ my: $("#myHorizontalID").val() +" " + $("#myVerticalID").val(), at: $("#atHorizontalID").val()+ " " + $("#atVerticalID").val(), of: $("#parentDivID"), collision: $("#collHorizontalID").val() +" " + $("#collVerticalID").val() }); } $("select").on("click keyup change", position); $("#parentDivID").draggable({ drag: position }); position(); }); </script> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> jQuery UI position method <div class="height"> </div> <div id="parentDivID"> <p> This is the parent target element. </p> </div> <div class="positionableClass" id="positionableId"> <p> Change my position </p> </div> <div id="optionsDivID"> <div class="selectDiv"> Select "my" positions : <select id="myHorizontalID"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="myVerticalID"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> </select> </div> <div class="selectDiv"> Select "at" positions : <select id="atHorizontalID"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="atVerticalID"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> </select> </div> <div class="selectDiv"> Select collision options: <select id="collHorizontalID"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="flipfit">flipfit</option> <option value="none">fit none</option> </select> <select id="collVerticalID"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="flipfit">flipfit</option> <option value="none">none</option> </select> </div> </div> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)