拖拽多个对象到盒子内
2016-05-19 00:00
211 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//////first点下时
objdrag($(".first"))
//////second点下时
objdrag($(".second"))
//////thirdly点下时
objdrag($(".thirdly"))
//////over///
})
//碰撞检测
function lengthn(obj_one,obj_place){
var objone = obj_one.offset();
var objone_l = objone.left;
var objone_t = objone.top;
var objone_r = objone_l + obj_one.width()
var objone_b = objone_t + obj_one.height()
var objtwo = obj_place.offset();
var objtwo_l = objtwo.left;
var objtwo_t = objtwo.top;
var objtwo_r = objtwo_l + obj_place.width()
var objtwo_b = objtwo_t + obj_place.height()
//console.log(objone_r +"|"+ objtwo_l)
if( objone_r-objtwo_l > 0 && objone_t-objtwo_b<0 && objone_l-objtwo_r<0 && objone_b-objtwo_t>0){
return true;
}
}
/*
$(".first").css("top",o_top)
$(".second").css("top",o_top)
$(".thirdly").css("top",o_top)
*/
function objdrag(objdrag){
//
//////first点下时
objdrag.mousedown(function(ev){
objdrag.css("position","absolute")
ev = ev || window.event;
var objall = $(".divall").offset();
var objall_l = objall.left - ev.pageX;
var objall_t = objall.top - ev.pageY;
var obj = objdrag.offset();
var obj_l = ev.pageX -obj.left;
var obj_t = ev.pageY -obj.top;
//console.log(objall.left)
$(document).mousemove(function(e){
objdrag.css("left", e.pageX - objall.left - obj_l)
objdrag.css("top", e.pageY - objall.top - obj_t)
//console.log(e.pageX +"|"+ objall.left +"|"+ (e.pageX - objall.left))
//碰撞对象
if(lengthn(objdrag,$(".divall"))){
objdrag.css("opacity","0.5")
$(".divall").addClass("divb")
}else{
objdrag.css("opacity","1")
$(".divall").removeClass("divb")
}
})
})
//////first抬起时
objdrag.mouseup(function(){
$(document).unbind();
//碰撞对象
//在范围对象碰撞了
if(lengthn(objdrag,$(".divall"))){
objdrag.css("position","")
objdrag.css("top","auto").css("left",0).css("opacity","1");
$(".divall").removeClass("divb")
}else{
objdrag.css("position","absolute")
}
})
//
}
</script>
<style type="text/css">
body{margin:0;padding:0;}
ul,li{margin:0;padding:0;list-style-type:none;}
.divall{width:200px;height:500px;background:#eee;position:absolute;right:10px;top:10px;}
.divb{border:3px solid #1bd566;background:#FFF;right:7px;top:7px;}
.first{width:200px;height:120px;background:red;z-index:2;top:0;cursor:pointer;}
.second{width:200px;height:150px;background:green;}
.thirdly{width:200px;height:180px;background:#1b88d5;}
</style>
</head>
<body>
<div class="divall">
<div class="drag first"></div>
<div class="drag second"></div>
<div class="drag thirdly"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//////first点下时
objdrag($(".first"))
//////second点下时
objdrag($(".second"))
//////thirdly点下时
objdrag($(".thirdly"))
//////over///
})
//碰撞检测
function lengthn(obj_one,obj_place){
var objone = obj_one.offset();
var objone_l = objone.left;
var objone_t = objone.top;
var objone_r = objone_l + obj_one.width()
var objone_b = objone_t + obj_one.height()
var objtwo = obj_place.offset();
var objtwo_l = objtwo.left;
var objtwo_t = objtwo.top;
var objtwo_r = objtwo_l + obj_place.width()
var objtwo_b = objtwo_t + obj_place.height()
//console.log(objone_r +"|"+ objtwo_l)
if( objone_r-objtwo_l > 0 && objone_t-objtwo_b<0 && objone_l-objtwo_r<0 && objone_b-objtwo_t>0){
return true;
}
}
/*
$(".first").css("top",o_top)
$(".second").css("top",o_top)
$(".thirdly").css("top",o_top)
*/
function objdrag(objdrag){
//
//////first点下时
objdrag.mousedown(function(ev){
objdrag.css("position","absolute")
ev = ev || window.event;
var objall = $(".divall").offset();
var objall_l = objall.left - ev.pageX;
var objall_t = objall.top - ev.pageY;
var obj = objdrag.offset();
var obj_l = ev.pageX -obj.left;
var obj_t = ev.pageY -obj.top;
//console.log(objall.left)
$(document).mousemove(function(e){
objdrag.css("left", e.pageX - objall.left - obj_l)
objdrag.css("top", e.pageY - objall.top - obj_t)
//console.log(e.pageX +"|"+ objall.left +"|"+ (e.pageX - objall.left))
//碰撞对象
if(lengthn(objdrag,$(".divall"))){
objdrag.css("opacity","0.5")
$(".divall").addClass("divb")
}else{
objdrag.css("opacity","1")
$(".divall").removeClass("divb")
}
})
})
//////first抬起时
objdrag.mouseup(function(){
$(document).unbind();
//碰撞对象
//在范围对象碰撞了
if(lengthn(objdrag,$(".divall"))){
objdrag.css("position","")
objdrag.css("top","auto").css("left",0).css("opacity","1");
$(".divall").removeClass("divb")
}else{
objdrag.css("position","absolute")
}
})
//
}
</script>
<style type="text/css">
body{margin:0;padding:0;}
ul,li{margin:0;padding:0;list-style-type:none;}
.divall{width:200px;height:500px;background:#eee;position:absolute;right:10px;top:10px;}
.divb{border:3px solid #1bd566;background:#FFF;right:7px;top:7px;}
.first{width:200px;height:120px;background:red;z-index:2;top:0;cursor:pointer;}
.second{width:200px;height:150px;background:green;}
.thirdly{width:200px;height:180px;background:#1b88d5;}
</style>
</head>
<body>
<div class="divall">
<div class="drag first"></div>
<div class="drag second"></div>
<div class="drag thirdly"></div>
</div>
</body>
</html>
相关文章推荐
- 新站 百度 seo
- redis入门——redis特性
- selenium之操作ChromeDriver
- WebView的用法
- RESTful API规范
- 前端路由实现与 react-router 源码分析
- Js 笔记
- 重载与重写
- List<String> String[] 之间的转化
- 转发 重定向 forward redirect
- sonar常见错误以及处理方案
- ImportError: cannot import name process_pdf 解决方法
- opencv切割图片,用于训练样本
- 在marathon上部署mesos-dns服务(解决无法启动,部署失败)
- 如何建立起一套有效的APP监控体系
- 移动互联网安全是企业发展的重要环节
- java高效导出excel
- 自学历程
- Java攻城狮的就业和薪酬情况
- 初尝试Spring boot