介绍 & lt; style>
,,,.div1{宽度:100 px;高度:,100 px;背景:,粉红色;位置:,绝对;}
,,,.div2 {
,,,,宽度:,150 px;高度:,150 px;背景:,灰色;位置:,绝对;
,,,,:,35%;
,,,,左:,35%;
,,,}
& lt;/style> html: & lt; body>
& lt;才能div 类=癲iv1"祝辞& lt;/div>
& lt;才能div 类=癲iv2"祝辞& lt;/div>
& lt;/body> , & lt; script>
,,,window.onload =, function (), {
,,,,,var oDiv =, document.getElementsByTagName (“div") [0];
,,,,,var oDiv2 =, document.getElementsByTagName (“div") [1];
,,,,,
,,,,,//1。按下,拖动
,,,,,oDiv.onmousedown =, function (ev), {
,,,,,,,var oEvent =, window.event | |,电动汽车;
,,,,,,,//5。计算需要往回移动的距离
,,,,,,,//鼠标与盒子的左相对距离
,,,,,,,var l =, oEvent.clientX 作用;oDiv.offsetLeft;
,,,,,,,//鼠标与盒子的上相对距离
,,,,,,,var t =, oEvent.clientY 作用;oDiv.offsetTop;
,,,,,,,document.onmousemove =, function (ev), {
,,,,,,,,,var oEvent =, window.event | |,电动汽车;
,,//oEvent.preventDefault ();
,,,,,,,,//2。获取鼠标坐标位置
,,,,,,,,,var x =, oEvent.clientX;
,,,,,,,,,var y =, oEvent.clientY;
,,,,,,,,,
,,,,,,,,,//div的坐标位置
,,,,,,,,,var x1 =, x 作用;l;
,,,,,,,,,var y1 =, y 作用;t;
,,,,,,,,,
,,,,,,,,,//div2的真实宽度
,,,,,,,,,var oDiv2Width =, oDiv2.offsetWidth;
,,,,,,,,,//div2的X坐标
,,,,,,,,,var oDiv2Left =, oDiv2.offsetLeft;
,,,,,,,,,//第一个左边的临界值
,,,,,,,,,var div1L =, x1 +, oDiv.offsetWidth;
,,,,,,,,,//第二个左边的临界值
,,,,,,,,,var div1L2 =, oDiv2Width +, oDiv2Left;
,,,,,,,,,//左边的两个临界值的判断
,,,,,,,,,//第一个上面的临界值
,,,,,,,,,var div1Top =, y1 +, oDiv.offsetHeight;
,,,,,,,,,//第二上面的临界值
,,,,,,,,,var div1Top2 =, oDiv2.offsetTop +, oDiv2.offsetHeight;
,,,,,,,,,
,,,,,,,,,
,,,,,,,,,
,,,,,,,,,如果(div1L>=oDiv2Left ,,, x1 & lt;=, div1L2 ,,, div1Top>=oDiv2.offsetTop ,,, y1 & lt;=div1Top2) {
,,,,,,,,,,oDiv2.style.backgroundColor =, & # 39;黄色# 39;;
,,,,,,,,,其他}{
,,,,,,,,,,oDiv2.style.backgroundColor =, & # 39;灰色# 39;;
,,,,,,,,,},,,,,,,,,,
,,,,,,,,,,,,,,,,,,
,,,,,,,,,//3。设置div的位置
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍javascript实现拖拽碰撞检测的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体内容如下
拖拽碰撞检测碰撞改变颜色css:
js:
