JS drag the container tools

2010-08-15  来源:本站原创  分类:Web  人气:166 

var isIE = (document.all)? true: false; var $ = function (id) (return "string" == typeof id? document.getElementById (id): id;); var Class = (create: function () (return function () (this.initialize.apply (this, arguments);))) var Extend = function (destination, source) (for (var property in source) (destination [property] = source [property];)) var Bind = function (object, fun) (return function () (return fun.apply (object, arguments);)) var BindAsEventListener = function (object, fun) (var args = Array.prototype.slice.call (arguments) . slice (2); return function (event) (return fun.apply (object, [event | | window.event]. concat (args));)) var CurrentStyle = function (element) (return element.currentStyle | | document.defaultView.getComputedStyle (element, null);) function addEventHandler (oTarget, sEventType, fnHandler) (if (oTarget.addEventListener) (oTarget.addEventListener (sEventType, fnHandler, false);) else if (oTarget.attachEvent) (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) (oTarget.detachEvent ("on" + sEventType, fnHandler);) else (oTarget ["on" + sEventType] = null;)); / / Drag and Drop program var Drag = Class.create (); Drag.prototype = (/ / drag and drop objects initialize: function (drag, options) (this.Drag = $ (drag); / / drag and drop objects this._x = this._y = 0; / / record the mouse position relative drag and drop objects this._marginLeft = this._marginTop = 0; / / record margin / / event object (for binding to remove the event) this._fM = BindAsEventListener (this, this. Move); this._fS = Bind (this, this.Stop); this.SetOptions (options); this.Limit =!! this.options.Limit; this.mxLeft = parseInt (this.options.mxLeft); this. mxRight = parseInt (this.options.mxRight); this.mxTop = parseInt (this.options.mxTop); 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.options.Handle) | | this.Drag; this._mxContainer = $ (this.options.mxContainer) | | null; / / setZB ("bgDiv", "div"); this.Drag.style.position = "absolute"; / / clear if (isIE & &!! this.options.Transparent) (/ / fill drag and drop objects with (this._Handle.appendChild (document.createElement ("div") ). style) (width = height = "100%"; backgroundColor = "# fff"; filter = "alpha (opacity: 0)";)) / / scope of the amendments this.Repair (); addEventHandler (this._Handle, "mousedown", BindAsEventListener (this, this.Start));), / / set default properties SetOptions: function (options) (this.options = (/ / default values Handle: "",// set trigger object (not set use the drag and drop objects) Limit: false, / / limit is set (for the true, useful for the following parameters can be negative) mxLeft: 0, / / left limit mxRight: 9999, / / the right limit mxTop: 0, / / on top restricted mxBottom: 9999, / / below limit mxContainer: "",// limit specified container LockX: false, / / if the horizontal lock drop LockY: false, / / if locking vertical drop Lock: false, / / if locking Transparent: false, / / is transparent onStart: function (){},// began to move when the implementation of the onMove: function (){},// move the implementation of onStop: function (){}// end of the mobile When the implementation); Extend (this.options, options | | ());), / / ready to drag the Start: function (oEvent) (if (this.Lock) (return;) this.Repair (); / / records the relative position of the mouse drag and drop objects this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; / / record margin this._marginLeft = parseInt (CurrentStyle (this.Drag ). marginLeft) | | 0; this._marginTop = parseInt (CurrentStyle (this.Drag). marginTop) | | 0; / / mousemove mouseup when the movement stops addEventHandler (document, "mousemove", this._fM); addEventHandler ( document, "mouseup", this._fS); if (isIE) (/ / focus is lost addEventHandler (this._Handle, "losecapture", this._fS); / / set the mouse capture this._Handle.setCapture ();) else (/ / focus is lost addEventHandler (window, "blur", this._fS); / / prevent the default action oEvent.preventDefault ();); / / add-ons this.onStart ();), / / amendments of Repair: function () (if (this.Limit) (/ / correct mistakes range of parameters this.mxRight = Math.max (this.mxRight, this.mxLeft + this.Drag.offsetWidth); this.mxBottom = Math.max (this.mxBottom , this.mxTop + this.Drag.offsetHeight); / / if the container must be set position to relative to relative positioning, and get set before offset! this._mxContainer | | CurrentStyle (this._mxContainer). position == "relative "| | (this._mxContainer.style.position =" relative ");)), / / drag the Move: function (oEvent) (/ / determine whether the lock if (this.Lock) (this.Stop (); return ;); / / clear the selection window.getSelection? Window.getSelection (). RemoveAllRanges (): document.selection.empty (); / / set the movement parameters var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y; / / set limit if (this.Limit) (/ / set the range of parameters var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; / / If you set the container, to revise the scope of parameters if ( !! this._mxContainer) (mxLeft = Math.max (mxLeft, 0); mxTop = Math.max (mxTop, 0); mxRight = Math.min (mxRight, this._mxContainer.clientWidth); mxBottom = Math.min ( mxBottom, this._mxContainer.clientHeight);); / / amendment to move the parameters iLeft = Math.max (Math.min (iLeft, mxRight - this.Drag.offsetWidth), mxLeft); iTop = Math.max (Math.min ( iTop, mxBottom - this.Drag.offsetHeight), mxTop);) / / set position, and correct margin if (! this.LockX) (this.Drag.style.left = iLeft - this._marginLeft + "px";) if (! this.LockY) (this.Drag.style.top = iTop - this._marginTop + "px";) / / add-ons this.onMove ();), / / stop dragging Stop: function () ( / / Remove event removeEventHandler (document, "mousemove", this._fM); removeEventHandler (document, "mouseup", this._fS); if (isIE) (removeEventHandler (this._Handle, "losecapture", this._fS) ; this._Handle.releaseCapture ();) else (removeEventHandler (window, "blur", this._fS);); / / add-ons this.onStop ();));

相关文章
  • JS drag the container tools 2010-08-15

    var isIE = (document.all)? true: false; var $ = function (id) (return "string" == typeof id? document.getElementById (id): id;); var Class = (create: function () (return function () (this.initialize.apply (this, arguments);))) var Extend = funct

  • Great web / js / css code website tools 2009-08-24

    Great web / js / css code website tools

  • ie js error transferred debugging tools 2011-06-01

    ie js error transferred debugging tools Default Category 2010-11-25 11:26:39 read 115 comments 0 Font Size: medium and small Subscriptions Web developer friends do well, js debugging is a very bad mood. In Firefox under firebug, this is really a good

  • js drag out the operation table 2009-11-07

    <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns = " http://www.w3.org/1999/xhtml "> <head> <title> js c

  • js drag the table out to achieve, to change column width 2010-04-13

    Read some on the table two days dragging out the js code, fear forgotten, Tie Shanglai arrayed. First, this aspect should be better on the compatible, but drag the mouse respond to the events it was not too: <! DOCTYPE html PUBLIC "- / / W3C / / D

  • js drag events to achieve 2010-06-29

    Javascript is characterized by processing and web dom effects, in most cases we only use the language of the simplest functions, such as making picture Carousel / pages tab and so on, this article will show you how in his own web page the production

  • Imitation effect iGoogle js drag version of the problem and sorting 2010-12-29

    Can be found: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/ Described in detail, and a Demo available online preview, and also available for download. In the use of the process, I encountered some problems, it took a long time to resolv

  • js drag and drop drag and drop 2011-01-07

    Good tutorial http://www.webreference.com/programming/javascript/mk/column2/3.html // iMouseDown represents the current mouse button state: up or down /* lMouseState represents the previous mouse button state so that we can check for button clicks an

  • 一起来写段JS drag拖动代码 2013-12-16

    记得几年前刚接触前端的时候,觉得能在网页上拖移元素是一件很爽的事,能写一段这样的代码是件很了不起的事情,于是乎google,baidu蛮多代码来学习,大致明白了思路,总结如下 1.为要被拖移三个事件,onmousedown,onmousemove,onmouseup 2.在onmousemove事件中来处理被拖移元素的位置的变化,其实说白了元素要移动的距离就是鼠标两次移动之间的距离. 3.其中还包括setCapture,releaseCapture,目的就是为了被搬移的元素始终能拥有焦点. 以前

  • JS charts extjs implementation tools can be combined 2009-02-27

    OpenFlashChart brief introduction by valensoft 2009-1-10 8:29:00 OpenFlashChart is an open source Flash and Javascript to the technical foundation for the free chart, using it to create some very useful analysis of the effect of the statements of the

  • JS drag of data from one table to another table with drag drag effect 2010-06-28

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>WebForm2</title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> <meta name="C

  • js drag the pop-up login box 2011-01-07

    <script type="text/javascript"> function _move(){ var objthis=this; this.x=null; this.y=null; this.xx=null; this.yy=null; this.xxx=null; this.yyy=null; this.obja=null; this.co=null; this.t=null; document.onmousemove=function(){ try{objthis

  • JS开发工具 Closure Tools 2009-11-06

    Closure Tools 网站 : http://code.google.com/intl/zh-CN/closure/ Google开源了其内部使用的JavaScript开发工具-- Google Closure Tools,希望帮助外部程序员开发出速度更快的Web应用程序.Google认为通过允许开发者使用Google自己所用的工具,他们不仅可以创造出更快的富Web应用程序,而且能真正让Web插上翅膀.Closure JavaScript编译器和库曾被Google用于开发Gmail.Goo

  • div js drag and drop and zoom control 2010-04-19

    <html> <body> <SCRIPT> document.execCommand ("2D-position", false, true); </ SCRIPT> <DIV CONTENTEDITABLE="true"> <DIV> My DIV </ DIV> </ DIV> <p> <span CONTENTEDITABLE="tru

  • JS achieve drag layer (compatible with most browsers) 2009-05-13

    Js drag a good layer code sharing up hair look. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • Companion.JS IE javascript debugging tool 2009-04-26

    Friend to do web development are clear, js Debugging is quite depressing, because first of all, more flexible language grammar, it is a weak type of scripting language, a lot of errors are beyond the control of these aside, the most painful Nothing i

  • ie debugging tools 2010-03-29

    Recommend a good js under IE debugging tools (Companion.JS) <script src="http://www.cnitblog.com/Files/yemoo/gg1.js" type="text/javascript"> </ script> Friends who are doing web development of a clear, js debugging process

  • Why am I opposed to actual projects using similar technology framework ext of js 2010-04-11

    To intensify the implementation of a recent project, the project team included myself, are new, the business is fundamental to understand it, project a delivery time is June 1, leaving the implementation plan in coding and testing of only a month, ge

  • MySQL GUI Tools Summary 2010-07-02

    Transfer from: http://topic.csdn.net/u/20080826/09/26753243-a19a- 4ab8-90a0-7826d493d8fe.html? 476506040 Preface MySQL GUI tools for many commonly used, such as Navicat, PHPMyadmin, SQLyog, MySQL-front, MySQL GUI Tools, etc.. This paper used this fea

  • Javascript (js) and Css compression tool introduced-Microsoft-Ajax-Minifier 2010-09-12

    Study: Walnut blog | This URL: http://www.hetaoblog.com/javascript-js-css-minifier-microsoft-ajax-minifier/ All articles in this blog all the original, welcome to reprint, However, the form must indicate the article hyperlink original source and auth