<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
#bg{
width: 100%;
height: 100%;
position: relative;
}
#blue{
width: 200px;
height: 200px;
background: blue;
position: absolute;
}
#green{
width: 200px;
height: 200px;
background: green;
position: absolute;
}
#red{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 0px;
top:0px;
}
#textblock{
width: 600px;
height: 300px;
margin: 500px auto 0px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="bg">
<div id="blue" onmousedown="redmove('blue')"></div>
<div id="green" onmousedown="redmove('green')"></div>
<div id="red" onmousedown="redmove('red')"></div>
</div>
<div id="textblock">
<input id="inputtext" type="text" placeholder="请输入">
<input id='submit' type="submit" value="提交">
<p id="type"></p>
<p id="title"></p>
<p id="result"></p>
</div>
</body>
</html>
<script>
var zindex = 1000;
function redmove(title){
console.log(event);
var orgin_x = event.screenX;
var orgin_y = event.screenY;
var red = document.getElementById(title);
red.style.zIndex = zindex;
zindex++;
function func1(){
var new_x = event.screenX;
var new_y = event.screenY;
var x = new_x - orgin_x;
var y = new_y - orgin_y
var red_x = red.offsetLeft;
var red_y = red.offsetTop;
// console.log(x);
// console.log(y);
console.log(red_x + x);
console.log(red_y + y);
red.style.left = red_x + x +'px';
red.style.top = red_y + y +'px';
orgin_x = new_x;
orgin_y = new_y;
}
red.addEventListener('mousemove',func1 );
red.addEventListener('mouseup',function(){
red.removeEventListener('mousemove', func1)
} );
}
var submit = document.getElementById('submit');
var text = document.getElementById('inputtext');
console.log(submit);
submit.addEventListener('click', function(){
var value = text.value;
var fullpath = 'http://api.tianapi.com/txapi/dream/';
$.get(fullpath, {key:'772a81a51ae5c780251b1f98ea431b84',word:value}, function(result){
console.log(result);
var p = document.getElementById('type');
p.innerText = result['newslist'][0]['type']
$('#title').text(result['newslist'][0]['title']);
$('#result').html(result['newslist'][0]['result']);
// text.value = '';
$('#inputtext').val('');
}, 'json')
})
</script>
