JSFiddle - React, Tailwind, and code Playground
CSS
html, body {
width: 100%;
height: 100%;
}
.element {
position: absolute;
top: 100px;
left: 100px;
width: 20px;
height: 20px;
background : #ff0;
}
JavaScript
var $element = $("<div class='element' />");
$("body").on({
'touchstart mousedown': function (e) {
$element.appendTo("body");
$(this).on('touchmove mousemove', move);
move(e);//you could do `$(this).trigger('touchmove', e)` but a conventional function call keeps `move` simple.
},
'touchend mouseup': function (e) {
$(this).off('touchmove mousemove');
}
});
function move(e) {
$element.css({
left: (e.pageX - 10) + 'px',
top: (e.pageY - 10) + 'px',
cursor: 'pointer'
});
}