<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js">/*
|
* This is a derivative of the similarly named class in the YUI Library.
|
* The original license:
|
* Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
* Code licensed under the BSD License:
|
* http://developer.yahoo.net/yui/license.txt
|
*/
|
|
<span id='Ext-dd-DDProxy'>/**
|
</span> * 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.
|
*/
|
Ext.define('Ext.dd.DDProxy', {
|
extend: 'Ext.dd.DD',
|
|
statics: {
|
<span id='Ext-dd-DDProxy-static-property-dragElId'> /**
|
</span> * The default drag frame div id
|
* @static
|
*/
|
dragElId: "ygddfdiv"
|
},
|
|
<span id='Ext-dd-DDProxy-method-constructor'> /**
|
</span> * Creates new DDProxy.
|
* @param {String} id the id of the linked html element
|
* @param {String} sGroup the group of related DragDrop objects
|
* @param {Object} config an object containing configurable attributes.
|
* Valid properties for DDProxy in addition to those in DragDrop:
|
*
|
* - resizeFrame
|
* - centerFrame
|
* - dragElId
|
*/
|
constructor: function(id, sGroup, config) {
|
if (id) {
|
this.init(id, sGroup, config);
|
this.initFrame();
|
}
|
},
|
|
<span id='Ext-dd-DDProxy-property-resizeFrame'> /**
|
</span> * @property {Boolean} resizeFrame
|
* 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.
|
*/
|
resizeFrame: true,
|
|
<span id='Ext-dd-DDProxy-property-centerFrame'> /**
|
</span> * @property {Boolean} centerFrame
|
* By default the frame is positioned exactly where the drag element is, so
|
* we use the cursor offset provided by Ext.dd.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.
|
*/
|
centerFrame: false,
|
|
<span id='Ext-dd-DDProxy-method-createFrame'> /**
|
</span> * Creates the proxy element if it does not yet exist
|
*/
|
createFrame: function() {
|
var self = this,
|
body = document.body,
|
div,
|
s;
|
|
if (!body || !body.firstChild) {
|
setTimeout( function() { self.createFrame(); }, 50 );
|
return;
|
}
|
|
div = this.getDragEl();
|
|
if (!div) {
|
div = document.createElement("div");
|
div.id = this.dragElId;
|
s = div.style;
|
|
s.position = "absolute";
|
s.visibility = "hidden";
|
s.cursor = "move";
|
s.border = "2px solid #aaa";
|
s.zIndex = 999;
|
|
// appendChild can blow up IE if invoked prior to the window load event
|
// while rendering a table. It is possible there are other scenarios
|
// that would cause this to happen as well.
|
body.insertBefore(div, body.firstChild);
|
}
|
},
|
|
<span id='Ext-dd-DDProxy-method-initFrame'> /**
|
</span> * Initialization for the drag frame element. Must be called in the
|
* constructor of all subclasses
|
*/
|
initFrame: function() {
|
this.createFrame();
|
},
|
|
<span id='Ext-dd-DDProxy-method-applyConfig'> applyConfig: function() {
|
</span> this.callParent();
|
|
this.resizeFrame = (this.config.resizeFrame !== false);
|
this.centerFrame = (this.config.centerFrame);
|
this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
|
},
|
|
<span id='Ext-dd-DDProxy-method-showFrame'> /**
|
</span> * Resizes the drag frame to the dimensions of the clicked object, positions
|
* it over the object, and finally displays it
|
* @param {Number} iPageX X click position
|
* @param {Number} iPageY Y click position
|
* @private
|
*/
|
showFrame: function(iPageX, iPageY) {
|
var el = this.getEl(),
|
dragEl = this.getDragEl(),
|
s = dragEl.style;
|
|
this._resizeProxy();
|
|
if (this.centerFrame) {
|
this.setDelta( Math.round(parseInt(s.width, 10)/2),
|
Math.round(parseInt(s.height, 10)/2) );
|
}
|
|
this.setDragElPos(iPageX, iPageY);
|
|
Ext.fly(dragEl).show();
|
},
|
|
<span id='Ext-dd-DDProxy-method-_resizeProxy'> /**
|
</span> * The proxy is automatically resized to the dimensions of the linked
|
* element when a drag is initiated, unless resizeFrame is set to false
|
* @private
|
*/
|
_resizeProxy: function() {
|
if (this.resizeFrame) {
|
var el = this.getEl();
|
Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
|
}
|
},
|
|
<span id='Ext-dd-DDProxy-method-b4MouseDown'> // overrides Ext.dd.DragDrop
|
</span> b4MouseDown: function(e) {
|
var x = e.getPageX(),
|
y = e.getPageY();
|
this.autoOffset(x, y);
|
this.setDragElPos(x, y);
|
},
|
|
<span id='Ext-dd-DDProxy-method-b4StartDrag'> // overrides Ext.dd.DragDrop
|
</span> b4StartDrag: function(x, y) {
|
// show the drag frame
|
this.showFrame(x, y);
|
},
|
|
<span id='Ext-dd-DDProxy-method-b4EndDrag'> // overrides Ext.dd.DragDrop
|
</span> b4EndDrag: function(e) {
|
Ext.fly(this.getDragEl()).hide();
|
},
|
|
<span id='Ext-dd-DDProxy-method-endDrag'> // overrides Ext.dd.DragDrop
|
</span> // By default we try to move the element to the last location of the frame.
|
// This is so that the default behavior mirrors that of Ext.dd.DD.
|
endDrag: function(e) {
|
|
var lel = this.getEl(),
|
del = this.getDragEl();
|
|
// Show the drag frame briefly so we can get its position
|
del.style.visibility = "";
|
|
this.beforeMove();
|
// Hide the linked element before the move to get around a Safari
|
// rendering bug.
|
lel.style.visibility = "hidden";
|
Ext.dd.DDM.moveToEl(lel, del);
|
del.style.visibility = "hidden";
|
lel.style.visibility = "";
|
|
this.afterDrag();
|
},
|
|
<span id='Ext-dd-DDProxy-method-beforeMove'> beforeMove : function(){
|
</span>
|
},
|
|
<span id='Ext-dd-DDProxy-method-afterDrag'> afterDrag : function(){
|
</span>
|
},
|
|
<span id='Ext-dd-DDProxy-method-toString'> toString: function() {
|
</span> return ("DDProxy " + this.id);
|
}
|
|
});
|
</pre>
|
</body>
|
</html>
|
