JQuery拖拽效果

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

成都创新互联公司专业为企业提供汉源网站建设、汉源做网站、汉源网站设计、汉源网站制作等企业网站建设、网页设计与制作、汉源企业网站模板建站服务,十多年汉源做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

先上HTML部分:


关闭

关闭

关闭

CSS部分:(www.gendan5.com)

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拖拽效果
网站URL:http://bzwzjz.com/article/jjdoip.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 企业网站建设公司 成都网站建设 成都商城网站制作 重庆电商网站建设 成都网站建设 成都网站建设公司 成都网站制作 网站建设方案 自适应网站设计 企业网站建设 高端网站建设 外贸营销网站建设 网站制作公司 成都网站设计 成都网站设计 成都网站建设 温江网站设计 手机网站设计 网站设计制作报价 温江网站设计 成都网站建设 网站建设改版