您的位置：首页 > Web前端 > JQuery

jQuery 拖动div，判断拖动的div是否在一个div层上

2013-12-13 00:00 489 查看

摘要: 拖动div，判断拖动的div是否在一个div层上

js代码：

var div_x = 0;
var div_y = 0;
var click_x = 0;
var click_y = 0;
var con_left = 0;
var con_right = 0;
var con_top = 0;
var con_bottom = 0;
var move_left = 0;
var move_right = 0;
var move_top = 0;
var move_bottom = 0;
$(document).ready(function(){
$("#move_div").mousedown(function(e){
div_x = $(this).offset().left;
div_y = $(this).offset().top;
click_x = e.pageX;
click_y = e.pageY;
$("#move_div").bind("mousemove",function(event){
$(this).css("margin-left",event.pageX-click_x+div_x-parseInt($("#con_div").css("margin-top").split("p")[0]));
$(this).css("margin-top",event.pageY-click_y+div_y);
con_left = $("#con_div").offset().left;
con_right = $("#con_div").offset().left + parseInt($("#con_div").css("width"));
con_top = $("#con_div").offset().top;
con_bottom = $("#con_div").offset().top + parseInt($("#con_div").css("height"));
move_left = $(this).offset().left;
move_right =$(this).offset().left + parseInt($(this).css("width"));
move_top = $(this).offset().top;
move_bottom = $(this).offset().top + parseInt($(this).css("height"));
if(((move_right > con_left && move_right < con_right) ||
(move_left < con_right && move_right > con_left))&&
((move_bottom > con_top && move_bottom < con_bottom) ||
(move_top < con_bottom && move_bottom > con_top))){
$("#con_div").text("I'm comming");
}else{
$("#con_div").text("I'm leaved");
}
});
});
$("#move_div").mouseup(function(){
$("#move_div").unbind("mousemove");
});
$("#move_div").mouseleave(function(){
$("#move_div").unbind("mousemove");
});
});

html代码

<body>
<div id="move_div" style="width: 200px;height: 200px;border: 1px solid gray;position: relative;z-index: 1;float:left;"></div>

<div id="con_div" style="width: 400px;height: 400px;border: 1px solid red;margin-left: 500px; margin-top:50px;">hello,are you comming?</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery div拖动

相关文章推荐

新的分享

章节导航