拖放效果代码_javascript技巧_脚本之家

本条顺序的原型是在做图片切割效果的时候做出来的,此时参照他事他说加以侦查了几许个同类的意义,跟muxrwc和BlueDestiny学习了广大事物。
固然每回收拾都觉着很好了,不过每间距大器晚成段时间又会意识得某些地方能够校勘,某些地点有不当,有些要求供给落实,就如自身攻读的文化那样。
这里考虑到部分人可能只必要轻松的拖放,所以有一个简化版的拖放SimpleDrag,方便学习。
效果预览 ps:在maxthon下黄金时代旦翻开广告过滤的话很或许会被过滤掉。 程序表达这里以SimpleDrag为例说一下基本原理。 首先开头化程序中要多个拖放对象:
复制代码 代码如下:this.Drag = $;
还要多少个参数在上酉时记下鼠标相对拖放对象的坐标: 复制代码 代码如下:this._x = this._y = 0;
还会有三个事件目的函数用于增加移除事件: 复制代码 代码如下:this._fM =
BindAsEventListener; this._fS = Bind; 分别是拖动程序和终止拖动程序。
拖放对象的position必需是absolute相对定位: 复制代码 代码如下:this.Drag.style.position =
“absolute”; 最终把Start带头拖放程序绑定到拖放对象mousedown事件:
add伊芙ntHandler(this.Drag, “mousedown”, BindAs伊芙ntListener;
鼠标在拖放对象按住,就能触发Start程序,首假设用来策画拖动,在这里处记录鼠标相对拖放对象的坐标:
复制代码 代码如下:this._x =
oEvent.clientX – this.Drag.offsetLeft; this._y = oEvent.clientY –
this.Drag.offsetTop;
并把_fM拖动程序和_fS甘休拖动程序分别绑定到document的mousemove和mouseup事件:
复制代码
代码如下:addEventHandler(document, “mousemove”, this._金沙网址,fM);
addEventHandler(document, “mouseup”, this._fS卡塔尔(قطر‎;
注意要绑定到document才得以确定保障事件在全部窗口文书档案中都有效,要是只绑定到拖放对象就超级轻易并发拖太快就脱节之处。
当鼠标在文档上移动时,就能够触发Move程序了,这里就是兑现拖动的次序。
通过未来鼠标的坐标值跟起头拖动时鼠标绝没有错坐标值的差就可以赢得拖放对象应该设置的left和top了:
this.Drag.style.left = o伊夫nt.clientX – this._x + “px”;
this.Drag.style.top = oEvent.clientY – this._y + “px”;
最终松开鼠标后就触发Stop程序结束拖放。
这里的基本点成效是把Start程序中给document增加的平地风波移除:
removeEventHandler(document, “mousemove”, this._fM);
removeEventHandler(document, “mouseup”, this._fSState of Qatar;
那样二个大约的拖放程序就做好了,上边说说其余扩张和细节部分。
锁定分三种,分别是:水平方向锁定、完全锁定。
那一个比较轻松,水平和垂直方向的锁定只要在Move判定是还是不是锁定再设置left和top就能够,要是是一心锁定就一贯再次来到。
if{ this.Drag.style.left = ; } if{ this.Drag.style.top = ; }
触发对象是用来触发拖放程序的,程序中经过Handle属性设置。一时没有必要全方位拖放对象都用来触发,此时就需求接触对象了。
使用了接触对象后,举办移动的可能拖放对象,只是用触发对象来触发拖放。
ps:触发对象的另三个用法是透过安装同样的Handle,达成二个触及对象同一时间拖放五个拖放对象。
要安装约束界定必需先把Limit设为true。范围节制分二种,分别是定点范围和容器范围界定,首要在Move程序中安装。
原理是当比较的值超越限制时,校勘left和top要设置的值使拖放对象能维系在设置的范围内。
容器范围约束就是点名上下左右的拖放范围。 各样属性的意思是:
上:top限制; 下:top+offsetHeight节制; 左:left限定;
右:left+offsetWidth节制。
假设限定设置不科学,恐怕产生上下或左右还要当先约束的状态,程序中有二个Repair程序用来改正范围参数的。
Repair程序会在程序开端化和Start程序中施行,在Repair程序中期维校勘mxRight和mxBottom:
this.mxRight = Math.max(this.mxRight, this.mxLeft +
this.Drag.offsetWidthState of Qatar; this.mxBottom = Math.max(this.mxBottom,
this.mxTop + this.Drag.offsetHeight卡塔尔国;
此中mxLeft+offsetWidth和mxTop+offsetHeight分别是mxRight和mxBottom的小不点儿范围值。
依据范围参数改过移动参数: iLeft = Math.max(Math.min(iLeft, mxRight –
this.Drag.offsetWidthState of Qatar, mxLeftState of Qatar; iTop = Math.max(Math.min(iTop, mxBottom

  • this.Drag.offsetHeight卡塔尔(قطر‎, mxTop卡塔尔;
    对于左侧上面要取更加大的值,对于侧边上边将要取越来越小的值。
    容器范围限定的情致就是把范围限制在三个容器_mxContainer内。
    要留意的是拖放对象必得包罗在_mxContainer中,因为程序中是选择相对稳定来设置容器范围界定的(假如是在容器外就要用相对定位,那样管理就相比艰巨了),还恐怕有正是容器空间要比拖放对象大,那几个就不要表明了吧。
    原理跟固定范围节制大致,只是范围参数是基于容器的习性的安装的。
    当设置了容器,在Repair程序会活动把position设为relative来相对固化:
    !this._mxContainer || CurrentStyle.position == “relative” ||
    (this._mxContainer.style.position = “relative”卡塔尔;
    ps:当中CurrentStyle是用来获得最终样式。
    注意假设在程序实施在此以前设置过拖放对象的left和top而容器未有安装relative,在自行安装relative时会发生位移现象,所以程序在起初化时就进行三回Repair程序防止这种情况。因为offsetLeft和offsetTop要在设置relative在此之前得到技能科学获取值,所以在Start程序中Repair要在装置_x和_y以前奉行。
    由于是相对牢固,对于容器范围来讲范围参数上下左右的值分别是0、clientHeight、0、clientWidth。
    clientWidth和clientHeight是容器可视部分的拉长率和中度。
    为了容器范围能合作固定范围的参数,程序中会获取容器范围和稳固范围中范围更加小的值:
    Code mxLeft = Math.max; mxTop = Math.max; mxRight = Math.min(mxRight,
    this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom,
    this._mxContainer.clientHeight卡塔尔(قطر‎;
    因为设置相对固化的关系,容器_mxContainer设置过后相似不要打消或校订,不然相当的轻巧招致移动相当。
    小编在一个拖放实例中看看,纵然鼠标移动到浏览器外面,拖放程序还是能够够推行,细心翻看后意识是用了setCapture。
    鼠标捕获是那几个顺序的要紧,功效是将鼠标事件捕获到方今文书档案的内定的靶子。这几个指标会为当前应用程序或任何系统选拔所有鼠标事件。
    使用很简短: this._Handle.setCapture(卡塔尔;
    setCapture捕获以下鼠标事件:onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。
    程序中一言九鼎是要捕获onmousemove和onmouseup事件。
    msdn的介绍中还说起setCapture有一个bool参数,用来设置在容器内的鼠标事件是或不是都被容器捕获。
    容器正是指调用setCapture的目的,大致敬思正是:
    参数为true时容器会捕获容器内部存款和储蓄器有指标的鼠标事件,即容器内的指标不会触发鼠标事件;
    参数为false时容器不会捕获容器内对象的鼠标事件,即容器内的指标足以健康地接触事件和废除冒泡。
    而对于容器外的鼠标事件无论参数是哪些都会被抓获,能够用下边那个大约的例证测量试验一下:
    Code

mouseover

此地的参数是true,意气风发开首body会捕获全部鼠标事件,固然鼠标经过div也不会触发onmousemove事件。
换到false的话,div就足以捕获鼠标事件,就能够触发div的onmousemove事件了。
拖放甘休后还要接收releaseCapture释放鼠标,那几个能够投身Stop程序中:
this._Handle.releaseCapture(卡塔尔国;
setCapture是ie的鼠标捕获方法,对于ff也许有打点的capture伊夫nts和releaseEvents方法。
但那五个方式只好由window来调用,并且muxrwc说那四个方法在DOM2里已经撤消了,在ff里已经没用了。
可是ff里貌似会自动安装废除鼠标捕获,但实际的景况就不理解了,找不到贰个比较详细的介绍,什么人有那上边的资料记得告诉笔者哟。
下边都以本人的疑忌,ff的鼠标捕获也就是能自行安装和释放的document.body.setCapture。
因为自个儿测试上面包车型大巴次第,发掘ie和ff效果是基本上的: ie: Code

ff: Code

心痛未有权威的素材仿照效法就只能猜猜了,还应该有超多还还未有清楚的地点未来再钻探拉。
注意ff2下的鼠标捕获有三个bug,当拖放对象内部从不公文内容并拖放到浏览器外时捕获就能够失效。
给拖放对象插入三个空文本,比方就足以消除,然而那几个bug在ff3已经修改了。
平常景观下,鼠标捕获都能日常捕获事件,但万大器晚成浏览器窗口的要害错过就能够引致捕获失效。
我一时测验到会促成标准错失的操作包含切换窗口,alert和popup等弹出窗体。
当主旨遗失时应有同期施行Stop程序停止拖放,但当难题错过就无法捕获mouseup事件也正是无法接触_fS。
幸亏ie有onlosecapture事件会在捕获失效时接触,针对那个情景能够这么设置:
add伊夫ntHandler(this._Handle, “losecapture”, this._fSState of Qatar;
并在Stop程序中移除: remove伊芙ntHandler(this._Handle, “losecapture”,
this._fS卡塔尔;
但ff没有附近的艺术,可是muxrwc找到三个替代losecapture的window.onblur事件,那么可以在Start程序中设置:
addEventHandler(window, “blur”, this._fS卡塔尔国; 在Stop程序中移除:
remove伊芙ntHandler(window, “blur”, this._fSState of Qatar;
那ie也是有window.onblur事件,用window.onblur替代losecapture不就能够省意气风发段代码了啊。
接着本身做了生机勃勃部分测验,开掘多数触发losecapture的情状都会同偶然候触发window.onblur,看来确实能够。
于是本身订正程序用window.onblur替代losecapture,但测验后就出标题了,小编发觉只要自身用alt+tab切换成另叁个窗口,拖动还足以持续,但此时应该是早已一传十十传百主题了。
于是本人逐个湮灭测验和程序代码,结果开掘只要选择了DTD,那么window.onblur会在重新取得主旨时才会触发。
大家能够用上边这段代码测验:

在切换成其它程序后,再切换回来才会触发window.onblur,还大概有多少个相比较稀奇的景观就隐蔽了,反正ie用window.onblur是不出彩的了。
对采用项境的文本内容、连接和图片等实行拖放操作会触发系统的默许动作,例如ie中拖动图片鼠标会化为幸免操作情况,那样会促成这么些拖放程序施行退步。
但是ie在装置了setCapture之后,通过客商分界面用鼠标举办拖放操作和剧情选用都会被禁绝。
意思就是setCapture之后就不可能对文档内容张开拖放和抉择,注意这里的拖放是指系统的默认动作,举例ondragstart就不会被触发。
但是若是setCapture的参数是false的话,容器内的靶子还是得以触发事件的,所以setCapture的参数要设成true或保留默许值。
而ff的鼠标捕获没有那一个效用,但足以用preventDefault来撤除事件的私下认可动作来消除:
o伊夫nt.preventDefault(卡塔尔(قطر‎;
ps:故事使用preventDefault会并发mouseup错失的动静,但作者在ff3中测量试验没有发觉,借使各位发掘此外mouseup错失的图景,必需告诉小编啊。
ie在安装setCapture之后内容选拔都会被取缔,但也为此不会免去在设置此前就已经选择的内容,並且设置之后也能通过别的办法选用内容,
举例用ctrl+a来抉择内容。
ps:onkeydown、onkeyup和onkeypress事件不会受到鼠标捕获影响。
而ff在mousedown时就能够消弭原本选拔的内容,但拖动鼠标,ctrl+a时依旧会三回九转采取内容。
不过在废除了系统暗许动作之后,那样的筛选并不会对拖放操作导致影响,这里设置重大仍是着更加好的体验。
早前小编用制止拖放对象被筛选的不二等秘书籍来达到目标,即ie中设置拖放对象的onselectstart再次来到false,在ff中安装样式MozUserSelect为none。
但这种办法只好禁绝拖放对象自己被增选,后来找到个更加好的点子撤消采用,不但不影响拖放对象的精选效果,还是可以对全部文书档案举办灭绝:
ie:document.selection.empty(State of Qatar ff:window.getSelection
为了幸免在拖放进程中甄选内容,所以把它内置Move程序中,上边是相当的写法:
window.getSelection ? window.getSelection : document.selection.empty
还应该有一个动静,当拖放对象设置了margin,那么拖放的时候就会错位(给SimpleDrag的拖放对象设置margin就能够测量试验)。
原因是在Start程序设置_x和_y时是行使offset获取的,而这几个值是总结margin的,所以在装置left和top早先要减去这几个margin。
但假若在Start程序中就去掉margin那么在Move程序中装置节制节制时就能寻思错误,
所以最佳是在Start程序中获取值: this._marginLeft =
parseInt(CurrentStyle.marginLeft) || 0; this._marginTop =
parseInt(CurrentStyle || 0; 在Move程序中设置值: this.Drag.style.left =
iLeft – this._marginLeft + “px”; this.Drag.style.top = iTop –
this._marginTop + “px”;
要在意margin要在节制改善之后再设置,不然会错位。
在ie有三个透明背景bug,能够用上边包车型地铁代码测验: Code

点击div的背景会触发不了事件。
到底什么日期会冒出那么些bug呢,再用下边的代码测量检验: Code

金沙网址 1

测量检验代码中本人把背景颜色设成深墨绿,首先能够看看在墨绿div内只要触发点是在银色上面,就会接触事件;相反,在任何不是背景的地点,就算是边框、图片,也不能够接触事件。
就好像把浅绿的背景的补到棕色div上来,并且只是是背景能那样,多奇异的设定啊。
这里要证实的是body相比极其,不管背景是或不是晶莹剔透,只要触发点是一向在body上就能够接触事件。
作者的定论是如若接触事件的靶子背景是晶莹剔透的,而事件的触发点不在对象内的因素上,亦非向来在body上,并且透明背景外没有非透明背景的话,那么事件触发就能够倒闭。
那些结论写得不太好,因为作者都不知改怎么表述那意外的设定,希望各位能驾驭。
ps:这里设置图片背景跟颜色背景效果是同风流倜傥的。
那最棒消除的诀窍就是给目的设叁个非透明背景,但临时须要正好是要透明的,那如何是好呢?
首先想到的是增多背景观后装置完全透明,但那样连边框,容器内的对象等都统统透明了,远远不足好。
借使能确认保证触发点直接在body或非背景上也足以,假诺这几个也不可能保障吗?
作者想到的贰个消除办法是在容器里面加贰个层,覆盖全部容器,并设置背景观和完全透明:
Code with(this._Handle.appendChild(document.createElement{ width =
height = “100%”; backgroundColor = “#fff”; filter = “阿尔法”; }
到这里又不能不说ie6的四个渲染bug,用上面包车型客车代码测验: Code

能够相比ie7的效应,能够看来此中的div即使高度设置了百分之百,但在外侧的div修正中度之后,却不知怎么原因并未有填写了。
假若这些div是拖动对象,顿然有50%拖不动了,那自然特别。
幸亏BlueDestiny告诉小编一个缓和措施,设置对象的overflow为hidden,里面包车型大巴div又会活动填写了。
BlueDestiny说“现身那么些问题的缘由是因为IE6渲染的主题材料,通过某个CSS的本性能够让DOM改革现在再行渲染。”
这一个bug也会有用zoom消除的,反正正是要使dom再一次渲染。
当开掘前后相继有其生机勃勃bug现身,把程序可选参数Transparent设为true就能够自动插入那样三个层了。
到这里插入一个小知识吧,细心的话会意识上边的测量检验代码中本人给html设了二个背景观。
大家能够去掉那几个背景观,会意识背景象会设置到方方面面页面,就算一贯都以用body设置页面背景象,但几眼前会不会有三个疑心,body是藤黄框的局部,为啥设置它的背景观就能够应用到全部页面,而给html设置了背景观就又“不奇怪”展现了吧。
那么些能够从CSS21的w3c标准中有关background的一些来看原因: For HTML
documents, however, we recommend that authors specify the background for
the BODY element rather than the HTML element. For HTML documents whose
root HTML element has computed values of ‘transparent’ for
‘background-color’ and ‘none’ for ‘background-image’, user agents must
instead use the computed value of those properties from that HTML
element’s first BODY element child when painting backgrounds for the
canvas, and must not paint a background for that BODY element. Such
backgrounds must also be anchored at the same point as they would be if
they were painted only for the root element. This does not apply to
XHTML documents. 笔者土耳其语很烂,就免强翻译一下啊:
对于HTML文书档案,大家建议笔者选择BODY成分的background,实际不是HTML成分的。假如HTML文书档案的根成分的’background-color’是’transparent’,同一时候’background-image’是’none’,那么在装置背景时就取HTML成分的第叁个BODY子成分的属性值,而且不再渲染那多少个成分的background。
前面多个句就看不太懂了,可是已经足足深入剖判原因了。
假如页面上有嵌入iframe,那将要在乎了,因为鼠标捕获在iframe上会有题目。
比方在拖放容器内的叁个iframe上比十分的快移动拖放,或然鼠标拖动到容器外的多少个iframe上,反正正是鼠标在iframe上,就能够出标题:
首先是捕获的失灵,鼠标在iframe上,就拖不动了,但并不会触发losecapture,更毫不说window的blur了,这一个在ie和ff都以相近;
其次ie里在iframe多摩擦四次,还或者招致ie死掉。 上边是本身想开的三种艺术:
隐讳页面的iframe,比较简单,但也会有些在iframe中重大的消息也被隐形,或许形成页面构造的错位,顾客体验倒霉;
鼠标移动到iframe后撤回拖放,难度非常小,但相符客商体验倒霉;
每种iframe用二个晶莹剔透的层遮住,很麻烦,要总结好每一种iframe的任务和大小;
用一个透明的层把全体页面遮住,相比推荐,也比较轻易,上面介绍这种做法。
笔者在仿Light博克斯内容展示效果做的不胜覆盖层适逢其时能选拔在这里边,首先实例化一个透明的覆盖层:
var ol = new OverLay;
然后在onStart和onStop事件中增加ol.Show来展现和隐身覆盖层就足以了,那样豆蔻梢头旦不是在iframe触发拖放就从不难点了。
有别的更加好的方法也请各位指教。
一时就研讨到此处,想不到小小的拖放就有像这种类型多的知识。
还应该有滚屏等那些都尚未考虑到呢,等之后有必要了再来探究拉。 使用说明实例化时只须要五个参数,正是拖放对象: new SimpleDrag;
有以下那几个可选参数和总体性: 属性:默许值//表明 Handle:””,//设置触发对象
Limit:false,//是或不是设置节制界定 mxLeft:0,//左侧节制mxRight:9999,//右侧节制 mxTop:0,//上面限定 mxBottom:9999,//上边节制mxContainer:””,//钦赐节制在容器内 LockX:false,//是不是锁定水平方向拖放
LockY:false,//是还是不是锁定垂直方向拖放 Lock:false,//是还是不是锁定 Transparent:
false,//是不是透明 onStart:function(卡塔尔{},//初阶活动时施行onMove:function(State of Qatar{},//移动时举办 onStop:function(卡塔尔国{}//截止运动时进行还会有属性Drag是拖放对象,Transparent、Handle和mxContainer起头化后就不可能再设置。
程序代码 Code复制代码 代码如下:var isIE =
? true : false; var $ = function { return “string” == typeof id ?
document.getElementById : id; }; var Class = { create: function {
this.initialize.apply; } } } var Extend = function { for (var property
in sourceState of Qatar { destination[property] = source[property]; } } var Bind
= function { return function() { return fun.apply; } } var
BindAsEventListener = function { return function { return
fun.call(object, (event || window.event)); } } var CurrentStyle =
function{ return element.currentStyle ||
document.defaultView.getComputedStyle; } function
addEventHandler(oTarget, sEventType, fnHandler) { if
(oTarget.addEventListener) { oTarget.addEventListener(sEventType,
fnHandler, false); } else if { oTarget.attachEvent(“on” + sEventType,
fnHandler); } else { oTarget[“on” + sEventType] = fnHandler; } };
function removeEventHandler(oTarget, sEventType, fnHandler) { if
(oTarget.removeEventListener) { oTarget.removeEventListener(sEventType,
fnHandler, false); } else if { oTarget.detachEvent(“on” + sEventType,
fnHandler); } else { oTarget[“on” + sEventType] = null; } };
//拖放程序 var Drag = Class.create(State of Qatar; Drag.prototype = { //拖放对象
initialize: function { this.Drag = $;//拖放对象 this._x = this._y =
0;//记录鼠标相对拖放对象的岗位 this._marginLeft = this._marginTop =
0;//记录margin //事件对象 this._fM = BindAsEventListener; this._fS =
Bind; this.SetOptions; this.Limit = !!this.options.Limit; this.mxLeft =
parseInt; this.mxRight = parseInt; this.mxTop = parseInt; this.mxBottom
= parseInt(this.options.mxBottom); this.LockX = !!this.options.LockX;
this.LockY = !!this.options.LockY; this.Lock = !!this.options.Lock;
this.onStart = this.options.onStart; this.onMove = this.options.onMove;
this.onStop = this.options.onStop; this._Handle = $ || this.Drag;
this._mxContainer = $(this.options.mxContainer) || null;
this.Drag.style.position = “absolute”; //透明 if(isIE &&
!!this.options.Transparent卡塔尔{ //填充拖放对象
with(this._Handle.appendChild(document.createElement{ width = height =
“100%”; backgroundColor = “#fff”; filter = “阿尔法”; } } //改良范围
this.Repair(卡塔尔(قطر‎; addEventHandler(this._Handle, “mousedown”,
BindAsEventListener; }, //设置暗许属性 SetOptions: function {
this.options = {//暗中认可值 Handle: “”,//设置触发对象 Limit:
false,//是还是不是设置限制约束 mxLeft: 0,//左边限定 mxRight: 9999,//侧边约束mxTop: 0,//上面节制 mxBottom: 9999,//下面节制 mxContainer:
“”,//钦命节制在容器内 LockX: false,//是或不是锁定水平方向拖放 LockY:
false,//是或不是锁定垂直方向拖放 Lock: false,//是还是不是锁定 Transparent:
false,//是或不是透明 onStart: function(卡塔尔国{},//最初运动时进行 onMove:
function(卡塔尔{},//移动时实行 onStop: function(卡塔尔(قطر‎{}//停止运动时推行 };
Extend(this.options, options || {}卡塔尔(قطر‎; }, //希图拖动 Start: function { if{
return; } this.Repair(卡塔尔国; //记录鼠标相对拖放对象的职位 this._x =
oEvent.clientX – this.Drag.offsetLeft; this._y = oEvent.clientY –
this.Drag.offsetTop; //记录margin this._marginLeft =
parseInt(CurrentStyle.marginLeft) || 0; this._marginTop =
parseInt(CurrentStyle || 0; //mousemove时移动 mouseup时停止
addEventHandler(document, “mousemove”, this._fM);
addEventHandler(document, “mouseup”, this._fS卡塔尔(قطر‎; if{ //核心丢失addEventHandler(this._Handle, “losecapture”, this._fSState of Qatar; //设置鼠标捕获
this._Handle.setCapture(卡塔尔; }else{ //主旨遗失 addEventHandler(window,
“blur”, this._fS卡塔尔国; //阻止私下认可动作 oEvent.preventDefault(State of Qatar; };
//附加程序 this.onStart(卡塔尔; }, //改善范围 Repair: function{
//修正错误范围参数 this.mxRight = Math.max(this.mxRight, this.mxLeft +
this.Drag.offsetWidth卡塔尔; this.mxBottom = Math.max(this.mxBottom,
this.mxTop + this.Drag.offsetHeightState of Qatar;
//如若有容器必须设置position为relative来相对固定,并在获得offset早前设置
!this._mxContainer || CurrentStyle.position == “relative” ||
(this._mxContainer.style.position = “relative”State of Qatar; } }, //拖动 Move:
function { //判别是不是锁定 if{ this.Stop(卡塔尔国; return; }; //驱除选取window.getSelection ? window.getSelection : document.selection.empty(卡塔尔;
//设置移动参数 var iLeft = oEvent.clientX – this._x, iTop =
oEvent.clientY – this._y; //设置范围限定 if{ //设置范围参数 var mxLeft
= this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom =
this.mxBottom; //若是设置了容器,再改正范围参数 if{ mxLeft = Math.max;
mxTop = Math.max; mxRight = Math.min(mxRight,
this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom,
this._mxContainer.clientHeight卡塔尔国; }; //修改移动参数 iLeft =
Math.max(Math.min(iLeft, mxRight – this.Drag.offsetWidth卡塔尔国, mxLeft卡塔尔; iTop
= Math.max(Math.min(iTop, mxBottom – this.Drag.offsetHeight卡塔尔(قطر‎, mxTop卡塔尔国; }
//设置地点,并改正margin if{ this.Drag.style.left = iLeft –
this._marginLeft + “px”; } if{ this.Drag.style.top = iTop –
this._marginTop + “px”; } //附加程序 this.onMove(卡塔尔国; }, //甘休拖动 Stop:
function(State of Qatar { //移除事件 removeEventHandler(document, “mousemove”,
this._fM); removeEventHandler(document, “mouseup”, this._fS); if{
removeEventHandler(this._Handle, “losecapture”, this._fS);
this._Handle.releaseCapture(); }else{ removeEventHandler(window,
“blur”, this._fS卡塔尔; }; //附加程序 this.onStop(卡塔尔; } }; 测量试验代码: Code
复制代码 代码如下:

拖放状态:未带头

拖放效果

拖放状态:未先河

[Ctrl+A 全选 注:如需引进外界Js需刷新技艺施行]

发表评论

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