以前写过一个原生JS的拖拽效果《原生JS拖拽效果》,今天闲来无事就写一个JQ的拖拽吧。
成都创新互联公司专业为企业提供汉源网站建设、汉源做网站、汉源网站设计、汉源网站制作等企业网站建设、网页设计与制作、汉源企业网站模板建站服务,十多年汉源做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
先上HTML部分:
<div class="boxbox">
<div class="box" style="top:150px;left:150px;"><em>关闭</em><img src="/upload/otherpic64/226459.jpg" /></div>
<div class="box" style="top:310px;left:150px;"><em>关闭</em><img src="/upload/otherpic64/226460.jpg" /></div>
<div class="box" style="top:470px;left:150px;"><em>关闭</em><img src="/upload/otherpic64/226461.jpg" /></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拖拽效果
转载注明:https://www.cdcxhl.com/article8/jjdoip.html
成都网站建设公司_创新互联,为您提供网站设计、响应式网站、建站公司、营销型网站建设、网站收录、外贸建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联