4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
437 lines
15 KiB
HTML
437 lines
15 KiB
HTML
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>JavaScript Documentation - DDProxy.js</title>
|
|
|
|
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<div id="header">
|
|
|
|
<h1>JavaScript Documentation</h1>
|
|
|
|
<h3><a href="./index.html">Drag and Drop</a></h3>
|
|
|
|
|
|
|
|
<div class="breadcrumbs">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="./index.html">Drag and Drop</a>
|
|
|
|
>
|
|
|
|
<strong>DDProxy.js</strong>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="body">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="nav">
|
|
|
|
<div class="module resources">
|
|
|
|
<ul class="content">
|
|
|
|
<li><a href="overview-tree.html">Tree View</a></li>
|
|
|
|
<li><a href="index-all.html">Element Index</a></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="module">
|
|
|
|
<h4><a href="./allclasses-noframe.html">Classes</a></h4>
|
|
|
|
<ul class="content">
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="YAHOO.util.html">
|
|
|
|
YAHOO.util</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="YAHOO.util.DD.html">
|
|
|
|
YAHOO.util.DD</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="YAHOO.util.DDProxy.html">
|
|
|
|
YAHOO.util.DDProxy</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="YAHOO.util.DDTarget.html">
|
|
|
|
YAHOO.util.DDTarget</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="YAHOO.util.DragDrop.html">
|
|
|
|
YAHOO.util.DragDrop</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="YAHOO.util.DragDropMgr.html">
|
|
|
|
YAHOO.util.DragDropMgr</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="module">
|
|
|
|
<h4><a href="./overview-summary.html">Files</a></h4>
|
|
|
|
<ul class="content">
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="overview-summary-DD.js.html">
|
|
|
|
DD.js</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="overview-summary-DDProxy.js.html">
|
|
|
|
DDProxy.js</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="overview-summary-DDTarget.js.html">
|
|
|
|
DDTarget.js</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="overview-summary-DragDrop.js.html">
|
|
|
|
DragDrop.js</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="overview-summary-DragDropMgr.js.html">
|
|
|
|
DragDropMgr.js</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="main">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2>DDProxy.js</h2>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="quick-links">
|
|
|
|
<strong>Quick Links:</strong>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="#classSummary">Class Summary</a> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="#source">Source Code</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="section class summaries">
|
|
|
|
<h3><a name="classSummary">Class Summary</a> <span class="top">[<a href="#top">top</a>]</span></h3>
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
<table border="1" cellpadding="3" cellspacing="0">
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td class="name">
|
|
|
|
<a href="YAHOO.util.DDProxy.html">YAHOO.util.DDProxy</a>
|
|
|
|
</td>
|
|
|
|
<td class="overview"> </td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="section source">
|
|
|
|
<h3><a name="source">Souce Code</a> <span class="top">[<a href="#top">top</a>]</span></h3>
|
|
|
|
<pre class="sourceview"><span class="comment">/**
|
|
* A DragDrop implementation that inserts an empty, bordered div into
|
|
* the document that follows the cursor during drag operations. At the time of
|
|
* the click, the frame div is resized to the dimensions of the linked html
|
|
* element, and moved to the exact location of the linked element.
|
|
*
|
|
* References to the "frame" element refer to the single proxy element that
|
|
* was created to be dragged in place of all DDProxy elements on the
|
|
* page.
|
|
*
|
|
* <span class="attrib">@extends</span> YAHOO.util.DD
|
|
* <span class="attrib">@constructor</span>
|
|
* <span class="attrib">@param</span> {String} id the id of the linked html element
|
|
* <span class="attrib">@param</span> {String} sGroup the group of related DragDrop objects
|
|
* <span class="attrib">@param</span> {object} config an object containing configurable attributes
|
|
* Valid properties for DDProxy in addition to those in DragDrop:
|
|
* resizeFrame, centerFrame, dragElId
|
|
*/</span>
|
|
YAHOO.util.DDProxy = <span class="reserved">function</span>(id, sGroup, config) {
|
|
<span class="reserved">if</span> (id) {
|
|
<span class="reserved">this</span>.init(id, sGroup, config);
|
|
<span class="reserved">this</span>.initFrame();
|
|
}
|
|
};
|
|
|
|
YAHOO.extend(YAHOO.util.DDProxy, YAHOO.util.DD);
|
|
|
|
<span class="comment">/**
|
|
* The default drag frame div id
|
|
* <span class="attrib">@type</span> String
|
|
*/</span>
|
|
YAHOO.util.DDProxy.dragElId = <span class="literal">"ygddfdiv"</span>;
|
|
|
|
<span class="comment">/**
|
|
* By default we resize the drag frame to be the same size as the element
|
|
* we want to drag (this is to get the frame effect). We can turn it off
|
|
* if we want a different behavior.
|
|
*
|
|
* <span class="attrib">@type</span> boolean
|
|
*/</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.resizeFrame = true;
|
|
|
|
<span class="comment">/**
|
|
* By default the frame is positioned exactly where the drag element is, so
|
|
* we use the cursor offset provided by YAHOO.util.DD. Another option that works only if
|
|
* you do not have constraints on the obj is to have the drag frame centered
|
|
* around the cursor. Set centerFrame to true for this effect.
|
|
*
|
|
* <span class="attrib">@type</span> boolean
|
|
*/</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.centerFrame = false;
|
|
|
|
<span class="comment">/**
|
|
* Previous proxy element size.
|
|
* <span class="attrib">@private</span>
|
|
*/</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>._previousSize = [-1, -1];
|
|
|
|
<span class="comment">/**
|
|
* Create the drag frame if needed
|
|
*/</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.createFrame = <span class="reserved">function</span>() {
|
|
var self = <span class="reserved">this</span>;
|
|
var body = document.body;
|
|
|
|
<span class="reserved">if</span> (!body || !body.firstChild) {
|
|
setTimeout( <span class="reserved">function</span>() { self.createFrame(); }, 50 );
|
|
<span class="reserved">return</span>;
|
|
}
|
|
|
|
var div = <span class="reserved">this</span>.getDragEl();
|
|
|
|
<span class="reserved">if</span> (!div) {
|
|
div = document.createElement(<span class="literal">"div"</span>);
|
|
div.id = <span class="reserved">this</span>.dragElId;
|
|
var s = div.style;
|
|
|
|
s.position = <span class="literal">"absolute"</span>;
|
|
s.visibility = <span class="literal">"hidden"</span>;
|
|
s.cursor = <span class="literal">"move"</span>;
|
|
s.border = <span class="literal">"2px solid #aaa"</span>;
|
|
s.zIndex = 999;
|
|
<span class="comment">
|
|
// appendChild can blow up IE if invoked prior to the window load event</span>
|
|
<span class="comment"> // while rendering a table. It is possible there are other scenarios </span>
|
|
<span class="comment"> // that would cause this to happen as well.</span>
|
|
body.insertBefore(div, body.firstChild);
|
|
}
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Initialization for the drag frame element. Must be called in the
|
|
* constructor of all subclasses
|
|
*/</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.initFrame = <span class="reserved">function</span>() {
|
|
<span class="comment"> // YAHOO.util.DDProxy.createFrame();</span>
|
|
<span class="comment"> // this.setDragElId(YAHOO.util.DDProxy.dragElId);</span>
|
|
|
|
<span class="reserved">this</span>.createFrame();
|
|
|
|
};
|
|
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.applyConfig = <span class="reserved">function</span>() {
|
|
<span class="reserved">this</span>.logger.log(<span class="literal">"DDProxy applyConfig"</span>);
|
|
YAHOO.util.DDProxy.superclass.applyConfig.call(<span class="reserved">this</span>);
|
|
|
|
<span class="reserved">this</span>.resizeFrame = (<span class="reserved">this</span>.config.resizeFrame !== false);
|
|
<span class="reserved">this</span>.centerFrame = (<span class="reserved">this</span>.config.centerFrame);
|
|
<span class="reserved">this</span>.setDragElId(<span class="reserved">this</span>.config.dragElId || YAHOO.util.DDProxy.dragElId);
|
|
<span class="comment">
|
|
//this.logger.log("dragElId: " + this.dragElId);</span>
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Resizes the drag frame to the dimensions of the clicked object, positions
|
|
* it over the object, and finally displays it
|
|
*
|
|
* <span class="attrib">@param</span> {int} iPageX X click position
|
|
* <span class="attrib">@param</span> {int} iPageY Y click position
|
|
* <span class="attrib">@private</span>
|
|
*/</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.showFrame = <span class="reserved">function</span>(iPageX, iPageY) {
|
|
var el = <span class="reserved">this</span>.getEl();
|
|
var dragEl = <span class="reserved">this</span>.getDragEl();
|
|
var s = dragEl.style;
|
|
|
|
<span class="reserved">this</span>._resizeProxy();
|
|
|
|
<span class="reserved">if</span> (<span class="reserved">this</span>.centerFrame) {
|
|
<span class="reserved">this</span>.setDelta( Math.round(parseInt(s.width, 10)/2),
|
|
Math.round(parseInt(s.height, 10)/2) );
|
|
}
|
|
|
|
<span class="reserved">this</span>.setDragElPos(iPageX, iPageY);
|
|
<span class="comment">
|
|
// s.visibility = "";</span>
|
|
YAHOO.util.Dom.setStyle(dragEl, <span class="literal">"visibility"</span>, <span class="literal">"visible"</span>);
|
|
};
|
|
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>._resizeProxy = <span class="reserved">function</span>() {
|
|
var DOM = YAHOO.util.Dom;
|
|
var el = <span class="reserved">this</span>.getEl();
|
|
var dragEl = <span class="reserved">this</span>.getDragEl();
|
|
|
|
<span class="reserved">if</span> (<span class="reserved">this</span>.resizeFrame) {
|
|
var bt = parseInt( DOM.getStyle(dragEl, <span class="literal">"borderTopWidth"</span> ), 10);
|
|
var br = parseInt( DOM.getStyle(dragEl, <span class="literal">"borderRightWidth"</span> ), 10);
|
|
var bb = parseInt( DOM.getStyle(dragEl, <span class="literal">"borderBottomWidth"</span> ), 10);
|
|
var bl = parseInt( DOM.getStyle(dragEl, <span class="literal">"borderLeftWidth"</span> ), 10);
|
|
|
|
<span class="reserved">if</span> (isNaN(bt)) { bt = 0; }
|
|
<span class="reserved">if</span> (isNaN(br)) { br = 0; }
|
|
<span class="reserved">if</span> (isNaN(bb)) { bb = 0; }
|
|
<span class="reserved">if</span> (isNaN(bl)) { bl = 0; }
|
|
|
|
<span class="reserved">this</span>.logger.log(<span class="literal">"proxy size: "</span> + bt + <span class="literal">" "</span> + br + <span class="literal">" "</span> + bb + <span class="literal">" "</span> + bl);
|
|
|
|
var newWidth = el.offsetWidth - br - bl;
|
|
var newHeight = el.offsetHeight - bt - bb;
|
|
|
|
<span class="reserved">if</span> (<span class="reserved">this</span>._previousSize[0] !== newWidth &&
|
|
<span class="reserved">this</span>._previousSize[1] !== newHeight) {
|
|
|
|
<span class="reserved">this</span>.logger.log(<span class="literal">"Resizing proxy element"</span>);
|
|
|
|
DOM.setStyle( dragEl, <span class="literal">"width"</span>, newWidth + <span class="literal">"px"</span> );
|
|
DOM.setStyle( dragEl, <span class="literal">"height"</span>, newHeight + <span class="literal">"px"</span> );
|
|
|
|
<span class="reserved">this</span>._previousSize = [newWidth, newHeight];
|
|
}
|
|
}
|
|
};
|
|
<span class="comment">
|
|
// overrides YAHOO.util.DragDrop</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.b4MouseDown = <span class="reserved">function</span>(e) {
|
|
var x = YAHOO.util.Event.getPageX(e);
|
|
var y = YAHOO.util.Event.getPageY(e);
|
|
<span class="reserved">this</span>.autoOffset(x, y);
|
|
<span class="reserved">this</span>.setDragElPos(x, y);
|
|
};
|
|
<span class="comment">
|
|
// overrides YAHOO.util.DragDrop</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.b4StartDrag = <span class="reserved">function</span>(x, y) {
|
|
<span class="comment"> // show the drag frame</span>
|
|
<span class="reserved">this</span>.logger.log(<span class="literal">"start drag show frame, x: "</span> + x + <span class="literal">", y: "</span> + y);
|
|
<span class="reserved">this</span>.showFrame(x, y);
|
|
};
|
|
<span class="comment">
|
|
// overrides YAHOO.util.DragDrop</span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.b4EndDrag = <span class="reserved">function</span>(e) {
|
|
<span class="reserved">this</span>.logger.log(<span class="reserved">this</span>.id + <span class="literal">" b4EndDrag"</span>);
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.getDragEl(), <span class="literal">"visibility"</span>, <span class="literal">"hidden"</span>);
|
|
};
|
|
<span class="comment">
|
|
// overrides YAHOO.util.DragDrop</span>
|
|
<span class="comment">// By default we try to move the element to the last location of the frame. </span>
|
|
<span class="comment">// This is so that the default behavior mirrors that of YAHOO.util.DD. </span>
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.endDrag = <span class="reserved">function</span>(e) {
|
|
var DOM = YAHOO.util.Dom;
|
|
<span class="reserved">this</span>.logger.log(<span class="reserved">this</span>.id + <span class="literal">" endDrag"</span>);
|
|
var lel = <span class="reserved">this</span>.getEl();
|
|
var del = <span class="reserved">this</span>.getDragEl();
|
|
<span class="comment">
|
|
// Show the drag frame briefly so we can get its position</span>
|
|
<span class="comment"> // del.style.visibility = "";</span>
|
|
DOM.setStyle(del, <span class="literal">"visibility"</span>, <span class="literal">""</span>);
|
|
<span class="comment">
|
|
// Hide the linked element before the move to get around a Safari </span>
|
|
<span class="comment"> // rendering bug.</span>
|
|
<span class="comment"> //lel.style.visibility = "hidden";</span>
|
|
DOM.setStyle(lel, <span class="literal">"visibility"</span>, <span class="literal">"hidden"</span>);
|
|
YAHOO.util.DDM.moveToEl(lel, del);
|
|
<span class="comment"> //del.style.visibility = "hidden";</span>
|
|
DOM.setStyle(del, <span class="literal">"visibility"</span>, <span class="literal">"hidden"</span>);
|
|
<span class="comment"> //lel.style.visibility = "";</span>
|
|
DOM.setStyle(lel, <span class="literal">"visibility"</span>, <span class="literal">""</span>);
|
|
};
|
|
|
|
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.toString = <span class="reserved">function</span>() {
|
|
<span class="reserved">return</span> (<span class="literal">"DDProxy "</span> + <span class="reserved">this</span>.id);
|
|
};
|
|
|
|
</pre>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="footer">
|
|
|
|
<hr />
|
|
|
|
Copyright © 2004 - 2006 Yahoo! Inc. All rights reserved.
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|