Source code
<script id="draggable.pl" type="text/prolog">
:- use_module(library(dom)).
:- use_module(library(js)).
:- dynamic(draggable/1).
main :-
once(get_by_tag(body, Body)),
bind(Body, mousemove, Event, (
draggable(Elem),
event_property(Event, pageX, X),
event_property(Event, pageY, Y),
move(Elem, X, Y)
)),
bind(Body, mouseup, _, (
retract(draggable(Elem)),
set_style(Elem, 'z-index', 0)
)),
forall(
get_by_class(draggable, Elem),
bind(Elem, mousedown, _, (
asserta(draggable(Elem)),
set_style(Elem, 'z-index', 999)
))
).
move(Elem, X, Y) :-
get_prop(Elem, offsetWidth, Width),
get_prop(Elem, offsetHeight, Height),
Top is Y - Height/2,
Left is X - Width/2,
set_style(Elem, top, px(Top)),
set_style(Elem, left, px(Left)).
</script>
<style type="text/css">
.draggable {
background: white;
border: 1px solid black;
cursor: move;
padding: 50px;
position: absolute;
z-index: 0;
user-select: none;
}
#draggable-blocks {
height: 100px;
}
</style>
<div id="draggable-blocks">
<div class="draggable">Block #3</div>
<div class="draggable">Block #2</div>
<div class="draggable">Block #1</div>
</div>
<script type="text/javascript">
var session = pl.create();
session.consult("draggable.pl", function() {
session.query("main.", function() {
session.answer();
});
});
</script>