JSFiddle - React, Tailwind, and code Playground
HTML
<div id='a'>
<div id='b'>B DIV</div>
</div>
CSS
#a {
position: relative;
height: 300px;
width: 300px;
}
#b {
position: relative;
left: 100px;
top: 100px;
}
div {
margin: 0;
padding: 0;
display: inline-block;
background-color: #eee;
/* prevent selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid black;
}
JavaScript
var d_mtarg_container = false;
$('#a').on("mousedown",function (e) { // undelegated mousedown to indicate a target has been made of the container itself
d_mtarg_container = this; // I will not set d_mtarg as an optimization: d_mtarg when set will cause _d_move_impl to run. It would be harmless but will cause unnecessary checks to run
});
// add a cb for mouseup for doc to cancel out d_mtarg_container setting
$(document).on("mouseup",function (e) {
d_mtarg_container = false;
});
$('#a').on("mousemove","*",function (e) {
// delegated mousemove event catches a mouse getting dragged from container to draggable and this triggers something
if (d_mtarg_container == e.delegateTarget && this.parentNode == e.delegateTarget) {
console.log("picked up", this);
d_mtarg = this;
d_mtarg_container = false;
this.style.color = 'red';
}
});
var d_touches_container = {};
$('#a').on("touchstart",function (e) {
var ct = e.originalEvent.changedTouches;
for (var i=0;i<ct.length;++i) {
var tid = "d_"+ct[i].identifier.toString();
d_touches_container[tid] = this;
}
//return false;
});
$('#a').on("touchmove", function (e) {
//console.log('b');
e.preventDefault(); // for stopping scrolling
});
$('#a').on("touchmove", "*", function (e){
if (this.parentNode == e.delegateTarget) {
var ct = e.originalEvent.changedTouches;
for (var i=0;i<ct.length;++i) {
...