<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.main_container{
width: 400px;
height:300px;
background-color: #FCC;
position: relative;
}
.symbol {
width: 100%;
height: 100%;
}
.operator{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
p.box{
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
background-color: #666;
}
</style>
<script src="./js_lib/jquery-3.3.1.min.js" charset="utf-8"></script>
</head>
<body>
<div>
<button type="button" onclick=t_1()>go</button>
</div>
<div class="main_container">
<div id="symbol" class="symbol">
</div>
<div id="operator" class="operator">
<p class="box" id="box_1"></p>
</div>
</div>
<script>
function V(){
this.symbol;
this.operator;
this.box;
this.box_click_left;
this.box_click_top;
this.__construct();
};
(function(){
this.__construct = function(){
debugger;
this.symbol = document.querySelector('#symbol');
this.operator = document.querySelector('#operator');
this.box = document.querySelector('#box_1');
$(this.box).on('mousedown', (function(e){
this.event_1(e);
}).bind(this));
$(this.operator).on('mouseup', (function(e){
this.event_2(e);
}).bind(this));
};
//----------------------------
this.event_1 = function(e){
// debugger;
this.box_click_left = e.offsetX;
this.box_click_top = e.offsetY;
$(this.box).appendTo(this.symbol);
$(this.operator).on('mousemove', (function(e){
this.event_3(e);
}).bind(this));
};
//----------------------------
this.event_2 = function(e){
$(this.operator).off('mousemove');
$(this.box).appendTo(this.operator);
};
//----------------------------
this.event_3 = function(e){
console.log('(%s, %s)', e.offsetX, e.offsetY);
let x= e.offsetX - this.box_click_left;
let y = e.offsetY - this.box_click_top;
$(this.box).css({
left: x,
top: y
});
};
}).call(V.prototype);
new V();
</script>
</body>
</html>
</pre>
