jquery拖拽效果网站建设前端

首页 > jquery拖拽效果网站建设前端

jquery拖拽效果网站建设前端

时间：2017/12/6 20:30:52 作者：tsccwl 人气：标签：jquery拖拽效果网站建设前端

　　

为什么写这个呢？

因为今天突然接到这个需求，有点懵，很久没有做过这个了。。。

本来打算找自己保存的资料，后来想了想，算了，重新写一个吧

就有了这个

<script>
$(document).ready(function(){
  dragTc();
  function dragTc(){
var _move=false;
var _x,_y,_left,_top,maxX,maxY;
    $(document).on('mousedown',".drag-head",function(e){  
    e = e || event;
    if(e.target.tagName != "EM"){
    e.preventDefault();
        _move=true;
        var $box = $(this).parent();
        _left = $box.offset().left - $(window).scrollLeft();//元素初始位置
        _top = $box.offset().top - $(window).scrollTop();
        _x=e.pageX;//光标初始位置
        _y=e.pageY;
        maxX = $(window).width() - $box.width();
        maxY = $(window).height() - $box.height();
        $box.addClass('mousethis').find('.drag-cont').fadeTo(20, 0.5);//点击后开始拖动并透明显示 ,如果不要，可以不写
    }else{
            $(this).parent().hide();
    }
    });  
    $(document).mousemove(function(e){  
    e = e || event;
        if(_move){  
        e.preventDefault();
            var x=e.pageX-_x+_left;//光标位移量
            var y=e.pageY-_y+_top; 
            x = x < 0 ? 0 : (x > maxX ? maxX : x);
            y = y < 0 ? 0 : (y > maxY ? maxY : y);
            $(".mousethis").css({top:y,left:x, right: 'auto', bottom: 'auto','margin': 'auto'});//控件新位置  
        }  
    }).mouseup(function(){  
    if(_move){
    _move=false;  
    $(".mousethis").find('.drag-cont').fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明  
    $(".mousethis").removeClass('mousethis');
    } 
    }); 
    
}
});
</script>
<div class="drag" style="position:fixed;width:400px;height:250px;background:#ccc;">
<h3 class="drag-head" style="margin:0;padding:15px;text-align:center;background:#f1f2f6;cursor:move;">拖拽头<em class="drag-close" style="float:right;cursor:default;">x</em></h3>
<div class="drag-cont" style="padding:15px;">
这里面可拖拽

这里面可拖拽

这里面可拖拽

这里面可拖拽

这里面可拖拽

</div>
</div>

提示：复制和保存代码功能在FF下无效。

上一篇：遵化商务局网站建设开发完成
下一篇：唐山网站建设之asp教程：提高字符串的连接符&的效率

地址：中国.唐山市路北区尚座即理工大学对面中国.河北唐山遵化市唐山做网站
本站网址：www.tswzsj.com联系电话：0315-6025099 建站热线：15031560143

唐山网站建设报价咨询

网站售前售后服务

冀ICP备12014317号-1 版权所有:唐山长城网络 www.tswzsj.com