Pretty sure they mean:
Horizontal: "left", "center", "right"
Vertical: "top", "middle", "bottom"
Important: "horizontal", "vertical"
The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both target and element have these properties: element, left, top, width, height. In addition, there's horizontal, vertical and important, giving you twelve potential directions like { horizontal: "center", vertical: "left", important: "horizontal" }.
I think important is which of the other two directions (a total of 6 direction) has priority. 6 x 2 = 12? I'm not sure of their logic here. It's also not so clear how it should be used. I created the following for testing.
$(function() {
function makeDiv(event) {
var d = $("<div>", {
id: "position" + ($("[id^='position']", event.target).length + 1),
class: "positionDiv circle"
}).appendTo($(event.target));
d.position({
my: "center",
of: event,
using: function(pos, props) {
console.log(pos, props);
var tg = props.target,
el = props.element;
$(this).css(pos);
$(this).html("T: " + pos.top + "<br />L: " + pos.left + "<br />H: " + props.horizontal +"<br />V: " + props.vertical + "<br />I: " + props.important);
}
});
}
$("#position1").position({
my: "center",
at: "center",
of: "#targetElement"
});
$("#targetElement").click(makeDiv);
});
#targetElement {
height: 200px;
margin: 10px;
background: #9cf;
}
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: #080;
}
.positionDiv.circle {
border-radius: 50%;
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 12px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="targetElement">
<div class="positionDiv" id="position1"></div>
</div>
Not exactly the answer you were looking for. I hope it helps a bit.
