JQuery拖拽效果-创新互联

以前写过一个原生JS的拖拽效果《原生JS拖拽效果》，今天闲来无事就写一个JQ的拖拽吧。

创新互联建站是一家专注于成都做网站、成都网站建设与策划设计,香河网站建设哪家好?创新互联建站做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:香河等地区。香河做网站价格咨询:13518219792

先上HTML部分：

<div class="boxbox">
<div class="box" style="top:150px;left:150px;"><em>关闭</em><img src="/file/tupian/20230130/226459.jpg" /></div>
<div class="box" style="top:310px;left:150px;"><em>关闭</em><img src="/file/tupian/20230130/226460.jpg" /></div>
<div class="box" style="top:470px;left:150px;"><em>关闭</em><img src="/file/tupian/20230130/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拖拽效果就这样出来了。

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。