而广大页面效果都要用到这个岗位。不得已,得练练,得记记。
上边就来讲说那么些基于 JQuery的简短拖拽插件吧。
按常规,先说说拖拽的规律,以及搞那样一个东东的步骤:
那什么样是拖拽呢? 看名字就通晓了:正是把贰个东东拖来拽去的。
放到大家的DOM上,正是改造它的岗位。
它独有多个困难:1、如何掌握是在拖? 2、怎样知道从哪拖,拖到哪?
实在,那也算不上难题,毕竟两者都以基础的东西,关键在于了解。
换来js 中,我们搞三个拖拽效果,大致有如下步骤:
1、让要素捕获事件(一般景色下,无非正是mousedown、mousemove、mouseup)
2、在mousedown时,标志开首拖拽,并获得成分及鼠标的岗位。
3、在mousemove时,不断的收获鼠标的新岗位,并透过相应的职责算法,来重新定位成分地点。
4、在mouseup时,结束拖拽。。。然唐宋而复始。
这中档,个供给小心的地点:被拖拽的要素,至少须求相对或相对定位,不然拖拽不会有效应。
OK,非常的少说,无代码,无真相。相应的解释都在里边了:
下载:

JQuery之拖拽插件,jquery拖拽

直白以来,都对JS获取元素的岗位认为相当的嫌疑:一会client、一会offset、一会scroll。

再加上各大浏览器之间的不包容,唉,搞得哥晕晕乎乎的。

而十分的多页面效果都要用到那些地方。不得已,得练练,得记记。

上面就来讲说这些基于 JQuery的简练拖拽插件吧。   

按常规,先说说拖拽的法规,以及搞那样二个东东的手续:

那怎么样是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的。
放到我们的DOM上,便是改动它的职位。

它独有多少个困难:1、怎么样知道是在拖? 2、怎么样晓得从哪拖,拖到哪?

实际上,那也算不上问题,究竟两个都以基础的东西,关键在于熟稔。

换成js 中,大家搞二个拖拽效果,大约有如下步骤:

1、让要素捕获事件(一般景观下,无非正是mousedown、mousemove、mouseup)

2、在mousedown时,标识开始拖拽,并赢得成分及鼠标的职位。

3、在mousemove时,不断的收获鼠标的新岗位,并通过相应的地方算法,来重新定位成分地点。

4、在mouseup时,甘休拖拽。。。然后生生不息。

那中档,个须求注意的地点:被拖拽的要素,至少供给绝对或相对定位,不然拖拽不会有功用。

OK,十分少说,无代码,无精神。相应的演说都在在这之中了:

相撞下载:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title></title>
<meta name=”keywords” content=”Javascript自由拖拽类” />
<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>

<script type=”text/javascript”>
   (function($)
    {
        $.extend({
            //获取鼠标当前坐标
            mouseCoords:function(ev){
                if(ev.pageX || ev.pageY){
                    return {x:ev.pageX, y:ev.pageY};
                }
                return {
                    x:ev.clientX + document.body.scrollLeft – document.body.clientLeft,
                    y:ev.clientY + document.body.scrollTop  – document.body.clientTop
                };
            },
            //获取样式值
            getStyle:function(obj,styleName)
            {
                return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
//                return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
            }
        });        

        // 成分拖拽插件
        $.fn.dragDrop = function(options)
        {
            var opts = $.extend({},$.fn.dragDrop.defaults,options);

            return this.each(function(){

                //是不是正在拖动
                var bDraging = false;   
                //移动的成分
                var moveEle = $(this);
                //点击哪个元素,以触发移动。
                //该因素需借使被活动成分的子成分(比如标题等)
                var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
                if(!focuEle || focuEle.length<=0)
                {
                    alert(‘focuEle is not found! the element must be a child of ‘+this.id);
                    return false;
                }                
                // initDiffX|Y : 开始时,鼠标与被活动成分原点的离开
                // moveX|Y : 移动时,被活动成分定位地方 (新鼠标地方与initDiffX|Y的差值)
                // 假设定义了活动中的回调函数,该对象将以参数传入回调函数。
                var dragParams = {initDiffX:”,initDiffY:”,moveX:”,moveY:”};  

                //被挪动成分,要求安装固定样式,不然拖拽效果将对事情未有何帮忙。
                moveEle.css({‘position’:’absolute’,’left’:’0′,’top’:’0′});
                
                //点击时,记录鼠标地方
                //DOM写法: getElementById(‘***’).onmousedown= function(event);
                focuEle.bind(‘mousedown’,function(e){                
                    //标识伊始活动
                    bDraging = true;
                    //改造鼠标形状
                    moveEle.css({‘cursor’:’move’});
                    //捕获事件。(该用法,还也有个好处,正是严防移动太快导致鼠标跑出被活动成分之外)
                    if(moveEle.get(0).setCapture)
                    {  
                        moveEle.get(0).setCapture();  
                    } 
                    //(实际上是鼠标当前任务相对于被活动成分原点的离开)
                    // DOM写法:(ev.clientX + document.body.scrollLeft – document.body.clientLeft) – document.getElementById(‘***’).style.left;
                    dragParams.initDiffX = $.mouseCoords(e).x – moveEle.position().left;
                    dragParams.initDiffY = $.mouseCoords(e).y – moveEle.position().top;
                });

                //移动进程
                focuEle.bind(‘mousemove’,function(e){
                    if(bDraging)
                    {    
                        //被移动成分的新岗位,实际上鼠标当前岗位与原岗位之差
                        //实际上,被活动成分的新任务,也能够直接是鼠标地点,那也能突显拖拽,但是成分的任务就不会标准。
                        dragParams.moveX = $.mouseCoords(e).x – dragParams.initDiffX;
                        dragParams.moveY = $.mouseCoords(e).y – dragParams.initDiffY;

                        //是还是不是限制在有些区域中移动.
                        //fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
                        if(opts.fixarea)
                        {
                            if(dragParams.moveX<opts.fixarea[0])
                            {
                                dragParams.moveX=opts.fixarea[0]
                            }
                            if(dragParams.moveX>opts.fixarea[1])
                            {
                                dragParams.moveX=opts.fixarea[1]
                            }

                            if(dragParams.moveY<opts.fixarea[2])
                            {
                                dragParams.moveY=opts.fixarea[2]
                            }
                            if(dragParams.moveY>opts.fixarea[3])
                            {
                                dragParams.moveY=opts.fixarea[3]
                            }
                        }
                        
                        //移动方向:能够是不限制、垂直、水平。
                        if(opts.dragDirection==’all’)
                        {
                            //DOM写法: document.getElementById(‘***JQuery之拖拽插件,JQuery之拖拽插件落到实处代码。’).style.left = ‘***px’; 
                            moveEle.css({‘left’:dragParams.moveX,’top’:dragParams.moveY});
                        }
                        else if (opts.dragDirection==’vertical’)
                        {
                            moveEle.css({‘top’:dragParams.moveY});
                        }
                        else if(opts.dragDirection==’horizontal’)
                        {
                            moveEle.css({‘left’:dragParams.moveX});
                        }

                        //假若有回调
                        if(opts.callback)
                        {
                            //将dragParams作为参数字传送递
                            opts.callback.call(opts.callback,dragParams);
                        }
                    }
                });

                //鼠标弹起时,标志为撤废活动
                focuEle.bind(‘mouseup’,function(e){
                    bDraging=false;
                    moveEle.css({‘cursor’:’default’});
                    if(moveEle.get(0).releaseCapture)
                    {
                        moveEle.get(0).releaseCapture();
                    }
                });
            });
        };

        //私下认可配置
        $.fn.dragDrop.defaults = 
        {
            focuEle:null,            //点击哪个成分先河扶拖拉机动,可为空。不为空时,须要为被拖动成分的子成分。
            callback:null,            //拖动时接触的回调。
            dragDirection:’all’,    //拖动方向:[‘all’,’vertical’,’horizontal’]
            fixarea:null            //限制在哪个区域拖动,以数组情势提供[minX,maxX,minY,maxY]
        };

    })(jQuery);   

    // test 
   $(function(){
        //限定区域,有回调函数。
        $(‘#dragDiv’).dragDrop({fixarea:[0,$(‘#dragContainer’).width()-50,0,$(‘#dragContainer’).height()-50],callback:function(params){
                $(‘#span1’).text(‘X:’+params.moveX+’ Y:’+params.moveY);
        }});
        //私下认可设置
        $(‘#dragDiv1’).dragDrop();
   });
</script>

</head>
<body>
    <div id=”dragContainer” style=”position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;”>

      <div id=”dragDiv” style=”height:50px;width:50px;”>
      </div>
      <div id=”dragDiv1″ style=”border:1px solid red;height:50px;width:50px;”>
      </div>

    </div>

      <span id=”span1″></span>
</body>
</html>

长期以来,都对JS获取成分的地方感觉非常的吸引:一会client、一会offset、一会scroll。
再加上各大浏览器之间的…

/**
* JavaScript ModelDialog v0.1
*
* new ModelDialog({
* caption 题目 ‘对话框题目'(暗中同意)
* template 主体内容 ”(默许)
* dialogCls 对话框className ‘md-dialog'(默认)
* headCls 头部className ‘md-head'(默认)
* btnCloseCls 关闭开关className ‘md-close'(暗许)
* bodyCls 主体className ‘md-body'(默认)
* shadowBg 遮蔽层背景观 ‘gray'(默许)
* shadowOpy 掩盖层透明的 0.2(私下认可)
* dragable 是不是可拖拽 true(暗许)
* dragInWin 是还是不是仅在窗口内拖动 (true)私下认可 与area互斥
* area [minX,maxX,minY,maxY] 与dragInWin互斥
* });
*/

复制代码 代码如下:

金沙注册送58 1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″/>
<title>Jeremy – DragDrop Test !</title>
<meta name=”keywords” content=”Javascript自由拖拽类” />
<script type=”text/javascript”
src=”jquery-1.4.2.min.js”></script>
<script type=”text/javascript”>
(function($)
{
$.extend({
//获取鼠标当前坐标
mouseCoords:function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft – document.body.clientLeft,
y:ev.clientY + document.body.scrollTop – document.body.clientTop
};
},
//获取样式值
getStyle:function(obj,styleName)
{
return obj.currentStyle ? obj.currentStyle[styleName] :
document.defaultView.getComputedStyle(obj,null)[styleName];
// return obj.currentStyle ? obj.currentStyle[styleName] :
document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
}
});
// 成分拖拽插件
$.fn.dragDrop = function(options)
{
var opts = $.extend({},$.fn.dragDrop.defaults,options);
return this.each(function(){
//是不是正在拖动
var bDraging = false;
//移动的成分
var moveEle = $(this);
//点击哪个元素,以触发移动。
//该因素需若是被移动成分的子成分(举例标题等)
var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
if(!focuEle || focuEle.length<=0)
{
alert(‘focuEle is not found! the element must be a child of
‘+this.id);
return false;
}
// initDiffX|Y : 初阶时,鼠标与被移位成分原点的偏离
// moveX|Y : 移动时,被挪动成分定位位置(新鼠标地方与initDiffX|Y的差值)
// 如若定义了移动中的回调函数,该对象将以参数字传送入回调函数。
var dragParams = {initDiffX:”,initDiffY:”,moveX:”,moveY:”};
//被挪动成分,须要安装固定样式,不然拖拽效果将于事无补。
moveEle.css({‘position’:’absolute’,’left’:’0′,’top’:’0′});
//点击时,记录鼠标地点
//DOM写法: getElementById(‘***’).onmousedown= function(event);
focuEle.bind(‘mousedown’,function(e){
//标志开首活动
bDraging = true;
//更动鼠标形状
moveEle.css({‘cursor’:’move’});
//捕获事件。(该用法,还也许有个好处,正是防御移动太快导致鼠标跑出被活动元素之外)
if(moveEle.get(0).setCapture)
{
moveEle.get(0).setCapture();
}
//(实际上是鼠标当前岗位相对于被活动元素原点的离开)
// DOM写法:(ev.clientX + document.body.scrollLeft –
document.body.clientLeft) –
document.getElementById(‘***’).style.left;
dragParams.initDiffX = $.mouseCoords(e).x – moveEle.position().left;
dragParams.initDiffY = $.mouseCoords(e).y – moveEle.position().top;
});
//移动进度
focuEle.bind(‘mousemove’,function(e){
if(bDraging)
{
//被挪动成分的新岗位,实际上鼠标当前岗位与原岗位之差
//实际上,被挪动成分的新职责,也足以从来是鼠标地点,那也能体现拖拽,不过成分的职位就不会标准。
dragParams.moveX = $.mouseCoords(e).x – dragParams.initDiffX;
dragParams.moveY = $.mouseCoords(e).y – dragParams.initDiffY;
//是还是不是限制在某些区域中移动.
//fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
if(opts.fixarea)
{
if(dragParams.moveX<opts.fixarea[0])
{
dragParams.moveX=opts.fixarea[0]
金沙注册送58 ,}
if(dragParams.moveX>opts.fixarea[1])
{
dragParams.moveX=opts.fixarea[1]
}
if(dragParams.moveY<opts.fixarea[2])
{
dragParams.moveY=opts.fixarea[2]
}
if(dragParams.moveY>opts.fixarea[3])
{
dragParams.moveY=opts.fixarea[3]
}
}
//移动方向:能够是不限量、垂直、水平。
if(opts.dragDirection==’all’)
{
//DOM写法: document.getElementById(‘***’).style.left = ‘***px’;
moveEle.css({‘left’:dragParams.moveX,’top’:dragParams.moveY});
}
else if (opts.dragDirection==’vertical’)
{
moveEle.css({‘top’:dragParams.moveY});
}
else if(opts.dragDirection==’horizontal’)
{
moveEle.css({‘left’:dragParams.moveX});
}
//借使有回调
if(opts.callback)
{
//将dragParams作为参数字传送递
opts.callback.call(opts.callback,dragParams);
}
}
});
//鼠标弹起时,标识为收回活动
focuEle.bind(‘mouseup’,function(e){
bDraging=false;
moveEle.css({‘cursor’:’default’});
if(moveEle.get(0).releaseCapture)
{
moveEle.get(0).releaseCapture();
}
});
});
};
//私下认可配置
$.fn.dragDrop.defaults =
{
focuEle:null,
//点击哪个成分发轫拖动,可为空。不为空时,须要为被拖动成分的子成分。
callback:null, //拖动时接触的回调。
dragDirection:’all’, //拖动方向:[‘all’,’vertical’,’horizontal’]
fixarea:null
//限制在哪个区域拖动,以数组格局提供[minX,maxX,minY,maxY]
};
})(jQuery);
// test
$(function(){
//限定区域,有回调函数。
$(‘#dragDiv’).dragDrop({fixarea:[0,$(‘#dragContainer’).width()-50,0,$(‘#dragContainer’).height()-50],callback:function(params){
$(‘#span1’).text(‘X:’+params.moveX+’ Y:’+params.moveY);
}});
//暗中同意设置
$(‘#dragDiv1’).dragDrop();
});
</script>
</head>
<body>
<div id=”dragContainer”
style=”position:relative;left:10px;top:10px;border:1px dashed
blue;width:500px;height:500px;”>
<div id=”dragDiv”
style=”background-color:blue;height:50px;width:50px;”>
</div>
<div id=”dragDiv1″ style=”border:1px solid
red;height:50px;width:50px;”>
</div>
</div>
<span id=”span1″></span>
</body>
</html>

宗旨代码:

你也许感兴趣的小说:

  • jQuery拖拽div完毕思路
  • jQuery使用drag效果落到实处自由拖拽div
  • jQuery插件完毕公文上传功效(帮助拖拽)
  • jquery完结拖拽调治Div大小
  • jQuery达成的简便拖拽功用示例
  • 依据jquery的二个拖拽到钦命区域内的意义
  • jquery拖拽排序轻易实现情势(效果加强版)
  • 基于jquery落成的鼠标拖拽元素复制并写入效果
  • jQuery达成的粗略拖拽成效示例【测验可用】

复制代码 代码如下:

/**
* JavaScript ModelDialog v0.4
* Copyright (c) 2010 snandy
* Blog:
* QQ群: 34580561
* Date: 2010-09-08
*
*
* new ModelDialog({
* caption 题目 ‘对话框标题'(暗中认可)
* template 主体内容 ”(暗中同意)
* dialogCls 对话框className ‘md-dialog'(默认)
* headCls 头部className ‘md-head'(默认)
* btnCloseCls 关闭开关className ‘md-close'(暗许)
* bodyCls 主体className ‘md-body'(默认)
* shadowBg 掩饰层背景象 ‘gray'(暗中认可)
* shadowOpy 遮掩层透明的 0.2(暗中认可)
* dragable 是或不是可拖拽 true(暗中认可)
* dragInWin 是还是不是仅在窗口内拖动 (true)默许 与area互斥
* area [minX,maxX,minY,maxY] 与dragInWin互斥
* });
*/
ModelDialog =
function(){
var px = ‘px’;
var isIE = /msie/.test(navigator.userAgent.toLowerCase());

function getViewSize(){
return {w: window[‘innerWidth’] ||
document.documentElement.clientWidth,
h: window[‘innerHeight’] || document.documentElement.clientHeight}
}
function getFullSize(){
var w = Math.max(document.documentElement.clientWidth
,document.body.clientWidth) +
Math.max(document.documentElement.scrollLeft,
document.body.scrollLeft);
var h =
Math.max(document.documentElement.clientHeight,document.body.clientHeight)

  • Math.max(document.documentElement.scrollTop,
    document.body.scrollTop);
    w = Math.max(document.documentElement.scrollWidth,w);
    h = Math.max(document.documentElement.scrollHeight,h);
    return {w:w,h:h};
    }
    function $(tag){
    return new $.prototype.init(tag);
    }
    $.prototype = {
    init : function(tag){
    this[0] = document.createElement(tag);
    return this;
    },
    setCls : function(cls){
    this[0].className = cls;
    return this;
    },
    setSty : function(name,val){
    name==’opacity’ ?
    isIE ?
    this[0].style.filter = ‘Alpha(Opacity=’ + val*100 + ‘)’ :
    this[0].style.opacity = val :
    this[0].style[name] = val;
    return this;
    },
    css : function(str){
    this[0].style.cssText = str;
    return this;
    },
    html : function(str){
    this[0].innerHTML = str;
    return this;
    }
    }
    $.prototype.init.prototype = $.prototype;

function ModelDialog(opt){
this.dialogCls = opt.dialogCls || ‘md-dialog’;
this.headCls = opt.headCls || ‘md-head’;
this.btnCloseCls = opt.btnCloseCls || ‘md-close’;
this.bodyCls = opt.bodyCls || ‘md-body’;
this.shadowBg = opt.shadowBg || ‘gray’;
this.shadowOpy = opt.shadowOpy || ‘0.2’;
this.caption = opt.caption || “对话框标题”;
this.template = opt.template || ”;
this.dragable = opt.dragable != false;
this.dragInWin = opt.dragInWin != false;
this.area = opt.area;
this.dialog = null;
this.head = null;
this.label = null;
this.btnClose = null;
this.body = null;
this.shadow = null;
this.init();
}
ModelDialog.prototype = {
init : function(){
var _this = this;
this.dialog =
$(‘div’).setCls(this.dialogCls).css(‘position:absolute;z-index:100;’)[0];
this.head = $(‘div’).setCls(this.headCls)[0];
this.label = $(‘label’).html(this.caption)[0];
this.btnClose = $(‘div’).setCls(this.btnCloseCls)[0];
this.on(this.btnClose,’click’,function(){
_this.onClose();
});
this.head.appendChild(this.label);
this.head.appendChild(this.btnClose);
this.body = $(‘div’).setCls(this.bodyCls)[0];
this.setContent(this.template);
this.dialog.appendChild(this.head);
this.dialog.appendChild(this.body);
this.createShadow();
document.body.appendChild(this.shadow);
document.body.appendChild(this.dialog);
this.moveToCenter();
// 计算拖拽范围
//
规范方式下:clientWidth=width+padding;offsetWidth=width+padding+border
if(this.dragable){
if(this.dragInWin){
var maxX = getViewSize().w – this.dialog.offsetWidth;
var maxY = getViewSize().h – this.dialog.offsetHeight;
this.dragdrop(this.dialog,{
bridge : this.head,
area : [0,maxX,0,maxY]
});
return;
}
if(this.area){
this.dragdrop(this.dialog,{
bridge : this.head,
area : this.area
});
return;
}
this.dragdrop(this.dialog,{
bridge : this.head
});

}

},
destroy : function(){
this.dialog = null;
this.head = null;
this.label = null;
this.btnClose = null;
this.body = null;
this.shadow = null;
},
createShadow : function(){
var str = ‘position:absolute;left:0px;top:0px;z-index:1’ +
‘;width:’ + getFullSize().w + px +
‘;height:’ + getFullSize().h + px +
‘;background:’ + this.shadowBg +
‘;opacity:’ + this.shadowOpy +
‘;filter:Alpha(Opacity=’ + this.shadowOpy*100 + ‘);’;
var _this = this;
this.shadow = $(“div”).setCls(‘md-shadow’).css(str)[0];
this.on(window,’resize’,function(){
_this.shadow.style.width = getFullSize().w + px;
_this.shadow.style.height = getFullSize().h + px;
_this.moveToCenter();
});
},
moveTo : function(x, y){
this.dialog.style.left = x + px;
this.dialog.style.top = y + px;
},
moveToCenter : function(){
var size = getViewSize();
var x = (size.w-50)/2 – (this.dialog.clientWidth-50)/2;
var y = (size.h- 50)/2 – (this.dialog.clientHeight-50)/2 +
document.documentElement.scrollTop;
this.moveTo(x, y);
},
setCaption : function(v){
this.caption = v;
this.label.innerHTML = v;
},
setContent : function(str){
this.template = str;
this.body.innerHTML = str;
},
onClose : function(){
document.body.removeChild(this.dialog);
document.body.removeChild(this.shadow);
if(this[‘onbi’]){
this.onbi();
}
this.destroy();
},
on : function(el, type, fn){
el.addEventListener ?
el.addEventListener(type, fn, false) :
el.attachEvent ?
el.attachEvent(“on” + type, fn) :
el[‘on’+type] = fn;
},
un : function(el,type,fn){
el.removeEventListener ?
el.removeEventListener(type, fn, false) :
el.detachEvent ?
el.detachEvent(“on” + type, fn) :
el[‘on’+type] = null;
},
dragdrop : function(){
return function(el,opt){
var _this=this, ele, diffX, diffY, dragX=true,dragY=true, minX, maxX,
minY, maxY, bridge;
ele = el;
opt && opt.dragX===false && (dragX=false);
opt && opt.dragY===false && (dragY=false);
opt && opt.area && typeof opt.area[0]===’number’ &&
(minX=opt.area[0]);
opt && opt.area && typeof opt.area[1]===’number’ &&
(maxX=opt.area[1]);
opt && opt.area && typeof opt.area[2]===’number’ &&
(minY=opt.area[2]);
opt && opt.area && typeof opt.area[3]===’number’ &&
(maxY=opt.area[3]);
opt && opt.bridge && (bridge=opt.bridge);
ele.style.position = ‘absolute’;
bridge ?
this.on(bridge,’mousedown’,mousedown) :
this.on(ele,’mousedown’,mousedown);
function mousedown(e){
e = e || window.event;
ele.style.cursor = ‘pointer’;
if(ele.setCapture){//IE
_this.on(ele, “losecapture”, mouseup);
ele.setCapture();
e.cancelBubble = true; //IE
}else if(window.captureEvents){//标准DOM
e.stopPropagation();
_this.on(window, “blur”, mouseup);
e.preventDefault();
}
_x = e.clientX;
_y = e.clientY;
diffX = e.clientX – ele.offsetLeft;
diffY = e.clientY – ele.offsetTop;
_this.on(document,’mousemove’,mousemove);
_this.on(document,’mouseup’,mouseup);
}
function mousemove(e){
e = e || window.event;
var moveX = e.clientX – diffX,
moveY = e.clientY – diffY;
moveX < minX && (moveX = minX); // left 最小值
moveX > maxX && (moveX = maxX); // left 最大值
moveY < minY && (moveY = minY); // top 最小值
moveY > maxY && (moveY = maxY); // top 最大值

dragX && (ele.style.left = moveX + ‘px’);
dragY && (ele.style.top = moveY + ‘px’);
}
function mouseup(e){
ele.style.cursor = ‘default’;
_this.un(document,’mousemove’,mousemove);
_this.un(document,’mouseup’,mouseup);
if(ele.releaseCapture){//IE
_this.un(ele, “losecapture”, mouseup);
ele.releaseCapture();
}
if(window.releaseEvents){//标准DOM
_this.un(window, “blur”, mouseup);
}
}
}
}()

}
return ModelDialog;
}();

躬行实践地址
装进下载地址
//www.jb51.net/jiaoben/35245.html

你大概感兴趣的稿子:

  • 详解AngularJS 模态对话框
  • 使用javascript展开模态对话框(示例代码)
  • JS对话框_JS模态对话框showModalDialog用法计算
  • JS
    模态对话框和非模态对话框操作技术汇总
  • javascript
    showModalDialog模态对话框使用表达
  • 三种WEB下的模态对话框
    (asp.net或js的分别完成)
  • JavaScript 完毕模态对话框
    源代码大全
  • js实现div模拟模态对话框表现U途乐L内容

相关文章

网站地图xml地图