JQuery拖拽效果
以前写过一个原生JS的拖拽效果《原生JS拖拽效果》,今天闲来无事就写一个JQ的拖拽吧。
先上HTML部分:
<div class="boxbox">
<div class="box" style="top:150px;left:150px;"><em>关闭</em><img src="http://cenggel.com/wp-content/uploads/2018/07/20180723-01.png" /></div>
<div class="box" style="top:310px;left:150px;"><em>关闭</em><img src="http://cenggel.com/wp-content/uploads/2018/07/2018071901.png" /></div>
<div class="box" style="top:470px;left:150px;"><em>关闭</em><img src="http://cenggel.com/wp-content/uploads/2018/07/20180714-01.png" /></div>
</div>
CSS部分:(www.gendan5.com)
<style>
*{ padding:0; margin:0;}
.boxbox{ margin: 0px auto; width: 1200px; height: 800px; position: relative; background: #eee;}
.box{ position:absolute;}
.box img{ display:block; height:150px; width:150px; cursor: all-scroll;}
.box em{ position:absolute; top:0; right:0; padding:0 5px; display:block; float:right; cursor:pointer;}
.box em:hover{ color:red;}
</style>
JQ部分:
function CglDrag(mainbox,Subgrade) {
//按钮及初始值
var disX = 0,
disY = 0,
zindex = 10;
$(document).on('mousedown',Subgrade,function (ev) { var _thiss = $(this); //用于提高当前的z-index值 zindex++; _thiss.css('z-index',zindex) //边界计算 - 有这个的时候被拖拽的盒子不能超过他的父级 function xianzhi(val,max,min){ if (val > max){ return max; }else if(val < min){ return min; }else{ return val; } } //获取XY值 var ev = ev || window.event; disX = ev.clientX - _thiss.get(0).offsetLeft; disY = ev.clientY - _thiss.get(0).offsetTop; //鼠标按下的时候 $(document).mousemove(function () { var ev = ev || window.event; var lefts= (ev.clientX - disX), tops= (ev.clientY - disY), maxle= ( _thiss.parent(mainbox).width() - _thiss.get(0).offsetWidth), maxto= ( _thiss.parent(mainbox).height() - _thiss.get(0).offsetHeight) lefts = xianzhi(lefts,maxle,0) tops = xianzhi(tops,maxto,0) _thiss.get(0).style.left = lefts + 'px'; _thiss.get(0).style.top = tops + 'px'; _thiss.find('img').attr('data-left',lefts) _thiss.find('img').attr('data-top',tops) }); //鼠标松开的时候 $(document).mouseup(function () { $(document).unbind('mousemove') $(document).unbind('mouseup') }); //点击em移除 $(this).find('em').click(function () { $(this).parent('div').remove(); }); return false; });
};
//引用 第一个参数:父级 第二个参数:自己
CglDrag('.boxbox','.box');
一个JQuery拖拽效果就这样出来了。
- 点赞
- 收藏
- 分享
- 文章举报
- 简单的jquery拖拽排序效果实现代码
- 简单的jQuery拖拽排序效果的实现(增强动态)
- jquery方法+js一般方法+js面向对象方法实现拖拽效果
- jQuery实现可拖拽的许愿墙效果【附demo源码下载】
- jquery鼠标拖拽效果分享
- 基于jquery的一个拖拽到指定区域内的效果
- jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
- jquery 拖拽div移动效果
- jquery初体验—pc和移动端拖拽排序(拼图)效果(兼容不完善)
- jQuery实现div拖拽效果实例分析
- jquery拖拽效果完整实例(附demo源码下载)
- jquery实现可旋转可拖拽的文字效果代码
- jQuery使用drag效果实现自由拖拽div
- 基于jquery的一个拖拽到指定区域内的效果
- jquery和javascript两种实现浮动窗口的拖拽效果(参照网上资料以及韩顺平老师讲解)
- 别人用jquery写的图片拖拽效果
- jQuery实现鼠标拖拽div效果
- 简单的jquery拖拽排序效果(转载)
- jquery实现的拖拽效果,解决拖动速度过快时的会卡现象,select的遮挡问题和透明效果
- jQuery拖拽排序插件制作拖拽排序效果(附源码下载)