知识大全 div拖拽插件——JQ.MoveBox.js

Posted 2022-07-20 知

篇首语：所谓的成熟、其实就是在不断看开狠多事情之后、更好的生活着。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 div拖拽插件——JQ.MoveBox.js相关的知识，希望对你有一定的参考价值。

div拖拽插件——JQ.MoveBox.js 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　以前用原生的JS做过类似拖拽div的效果现在按原思路改做成一个JQ的小插件当作制作JQ插件的一个小练习为

代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head> <meta equiv="Content Type" content="text/;charset=gb " /> <title></title> <style type=text/css> *margin: ;padding: ; #boxwidth: px;height: px;margin: px auto;position:relative;border: px solid #ccc;border left: px solid #ccc; float boxwidth: px;height: px;background:# ;color:#fff;position:absolute;top: px;left: px;cursor:move;z index: ;border: px solid #ccc;border right: px solid #fc ; float box width: px;height: px;background:#f ;color:#fff;position:absolute;top: ;left: px;cursor:move;border top: px solid # ; </style> </head> <body> <div id="box"> <div ></div> <div ></div> </div> <script type=text/javascript src= <script type=text/javascript" src=JQ MoveBox js></script> <script type=text/javascript> $(" float box") MoveBox(); $(" float box ") MoveBox(out:true); </script> </body> </> 代码如下: (function($) var n=; var o= $ fn MoveBox=function(options) var opts=$ extend( $ fn MoveBox defaults options); return this each(function(i) $(this) mousedown(function(e) o iTop=$(this) position() top e pageY; o iLeft=$(this) position() left e pageX; n++; $this=$(this); $this css( z index :n); $(document) bind("mousemove" function(e) var iLeft=e pageX + o iLeft; var iTop=e pageY + o iTop; if(opts out) if(iLeft< $this parent() offset() left parseInt($this parent() css("border left width"))) iLeft=$this parent() offset() left parseInt($this parent() css("border left width")); else if(iLeft>$(document) width() $this width() parseInt($this css("border left width")) parseInt($this css("border right width")) $this parent() offset() left parseInt($this parent() css("border left width"))) iLeft=$(document) width() $this width() parseInt($this css("border left width")) parseInt($this css("border right width")) $this parent() offset() left parseInt($this parent() css("border left width")); if(iTop< $this parent() offset() top parseInt($this parent() css("border top width"))+$(document) scrollTop()) iTop=$this parent() offset() top parseInt($this parent() css("border top width"))+$(document) scrollTop(); else if(iTop>$(window) height()+$(document) scrollTop() $this height() parseInt($this css("border top width")) parseInt($this css("border bottom width")) $this parent() offset() top parseInt($this parent() css("border top width"))) iTop=$(window) height()+$(document) scrollTop() $this height() parseInt($this css("border top width")) parseInt($this css("border bottom width")) $this parent() offset() top parseInt($this parent() css("border top width")); else if(iLeft< ) iLeft=; else if(iLeft>$this parent() width() $this width() parseInt($this css("border left width")) parseInt($this css("border right width"))) iLeft=$this parent() width() $this width() parseInt($this css("border left width")) parseInt($this css("border right width")); if(iTop< ) iTop=; else if(iTop>$this parent() height() $this height() parseInt($this css("border top width")) parseInt($this css("border bottom width"))) iTop=$this parent() height() $this height() parseInt($this css("border top width")) parseInt($this css("border bottom width")); $this css( left :iLeft +"px" top :iTop + "px" ) ); $(document) bind("mouseup" function() $(document) unbind("mousemove"); $(document) unbind("mouseup"); ); ); ); ; $ fn MoveBox defaults= out:false //默认不可跑出线外 ; )(jQuery); cha138/Article/program/Java/JSP/201311/20266