半路杀入java
2014-08-25 18:43:35
等
Jquery拖动Div如何实现对齐div时出现对齐线
如下图,我有3个可以拖动的div,我希望的效果是拖动其中一个的时候与任意同级div对齐的时候出现水平线,但是目前的情况是 拖动div2 与div3 ,当与div1对齐的时候出现水平线,而div2和div3没有水平线,贴上代码 希望大家能帮我看看,谢谢
var down=false; var leftequal=false; var topequal=false; var finalleft; var finaltop; $("#draggable"+count).mousemove(function(e){ if(down){ var left=$(this).css("left"); var top=$(this).css("top"); var newtop=parseInt(top); var newleft=parseInt(left); finalleft=newleft+"px"; finaltop=newtop+"px"; $("#finaltop").val(finaltop); $("#finalleft").val(finalleft); $(this).siblings().each(function(){ var selftop=$(this).css("top"); var newselftop=parseInt(selftop); var selfleft=$(this).css("left"); var newselfleft=parseInt(selfleft); if(newtop==newselftop){ topequal=true; document.getElementById("hr22").style.display='block'; document.getElementById("hr22").style.top=finaltop; } if(newleft==newselfleft){ leftequal=true; document.getElementById("hr11").style.display='block'; document.getElementById("hr11").style.left=finalleft; } if(newleft!=newselfleft){ leftequal=false; document.getElementById("hr11").style.display='none'; } if(newtop!=newselftop){ topequal=false; document.getElementById("hr22").style.display='none'; } }); } }); $("#draggable"+count).mousedown(function(e){ down=true; relpos = $(this).offset(); var relpos_top = relpos.top +"px"; var relpos_left = relpos.left + "px"; $(this).css({"position":"absolute","top":relpos_top,"left":relpos_left}); }); $("#draggable"+count).mouseup(function(){ down=false; abspos=$(this).offset(); var abspos_top = abspos.top +"px"; var abspos_left = abspos.left + "px"; $(this).css({"position":"absolute","top":abspos_top,"left":abspos_left}); $(this).siblings().each(function(){ if(leftequal){ $("#draggable"+count).css("left",finalleft); //$(this).css("left",finalleft); } if(topequal){ $("#draggable"+count).css("top",finaltop); //$(this).css("top",finaltop); } }); document.getElementById("hr11").style.display='none'; document.getElementById("hr22").style.display='none'; }); dragdivcenter(); });
其中定义好了水平线,默认是隐藏的
<hr id="hr11" style="border:1px dashed #F00;width:0.5px;height:800px;left:0px;top:0px;position:absolute;display:none" />
评论

- 等 最代码怎么获取牛币啊?
- 完 谁来告诉我最代码上线的时间,答对者给5牛币,先来先得
- 等 牛友们,大家好,你们做程序员多久了?现在还好吗?
- 完 在微信打开的页面里进行app下载
- 等 最代码2014年欢乐聚声会
- 完 mysql如何查询表数据并且对3个字段降序的SQL?
- 完 最代码牛币机制改革
- 完 成功的在bae上使用了自定义运行环境 jetty+nginx的组合,大家对jetty+nginx优化有哪些心得?
- 完 进来分享一下各位牛牛是如何加入最代码大家庭的?
- 等 为什么java BufferedImage类处理大图直接抛出内存溢出的异常?
- 等 最代码是否开发手机app客户端?
- 完 java程序员学习哪些java的技术?java有哪些框架?都能做哪方面的开发?
- 等 php格式网页文件怎么运行?
- 等 Java volatile值获取的问题
- 等 前端vue,拦截了登录后台后,返回的token,requests拦截token,但是发送请求的时候,就出现跨越异常
- 等 大专本科计算机科班怎么找到Java工作?
- 等 eclipse怎么把三个java swing游戏项目合成一个项目?
- 完 伙伴们,大家都有什么好的解压方式么,分享一下~
- 完 三四线城市,6、7k,运维工作,索然无味,想去辞职上培训,各位牛牛有什么建议嘛
- 等 jsp页面输入中文变成问号
- 等 JPA在线上运行一段时间后报错Caused by: java.lang.IncompatibleClassChangeError: null
- 等 PHP 这个规则用preg_match_all怎么写
- 等 大佬们,有没有知道Alfresco如何配置LDAP登录呢?
- 等 php的install目录是框架带的吗?

- 等 jquery函数function(a){}(jQuery)和jQuery(function(){}) 各自在什么阶段执行?
- 等 jquery如何实现简单的无缝轮播图片动画?
- 完 关于用jquery请求参数的问题
- 等 jquery这个语法如何解释?
- 完 jsp网页导入jquery.js为什么执行函数失败?
- 完 jquery上传图片选择文件时如何只浏览.jpg .png 格式的文件?
- 等 jquery validator提示如何修改为悬浮状态?
- 完 jquery demo
- 完 jquery validate验证框架如何验证输入字符串带空格?
- 等 jquery图片上传插件哪个最好?
- 完 jquery如何通过鼠标点击事件实现图中的特效?
- 等 jquery如何实现多行多列图片自动滚动特效?

zhongdafa LV1
2021年1月8日
felixsun
2020年5月24日
暂无贡献等级
id2600 LV2
2018年5月25日
ada混世大魔王
2018年4月27日
暂无贡献等级
kklmn13
2018年1月16日
暂无贡献等级
317605747 LV1
2017年4月17日
Aurevoir1993 LV2
2017年1月9日
mm331347
2016年9月21日
暂无贡献等级
lixiaodong LV2
2015年6月10日
easonxz LV1
2014年9月9日