JQuery拖拽效果

浏览: 811次 日期:2019年01月20日 13:34:23 作者:青格勒

以前写过一个原生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部分:

<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拖拽效果就这样出来了。

文章链接:http://cenggel.com/js/160.html

版权声明:文章《JQuery拖拽效果》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注