4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js">/*
19 * This is a derivative of the similarly named class in the YUI Library.
20 * The original license:
21 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
22 * Code licensed under the BSD License:
23 * http://developer.yahoo.net/yui/license.txt
26 <span id='Ext-dd-DDProxy'>/**
27 </span> * @class Ext.dd.DDProxy
29 * A DragDrop implementation that inserts an empty, bordered div into
30 * the document that follows the cursor during drag operations. At the time of
31 * the click, the frame div is resized to the dimensions of the linked html
32 * element, and moved to the exact location of the linked element.
34 * References to the "frame" element refer to the single proxy element that
35 * was created to be dragged in place of all DDProxy elements on the
38 Ext.define('Ext.dd.DDProxy', {
42 <span id='Ext-dd-DDProxy-static-property-dragElId'> /**
43 </span> * The default drag frame div id
46 dragElId: "ygddfdiv"
49 <span id='Ext-dd-DDProxy-method-constructor'> /**
50 </span> * Creates new DDProxy.
51 * @param {String} id the id of the linked html element
52 * @param {String} sGroup the group of related DragDrop objects
53 * @param {Object} config an object containing configurable attributes.
54 * Valid properties for DDProxy in addition to those in DragDrop:
60 constructor: function(id, sGroup, config) {
62 this.init(id, sGroup, config);
67 <span id='Ext-dd-DDProxy-property-resizeFrame'> /**
68 </span> * By default we resize the drag frame to be the same size as the element
69 * we want to drag (this is to get the frame effect). We can turn it off
70 * if we want a different behavior.
71 * @property resizeFrame
76 <span id='Ext-dd-DDProxy-property-centerFrame'> /**
77 </span> * By default the frame is positioned exactly where the drag element is, so
78 * we use the cursor offset provided by Ext.dd.DD. Another option that works only if
79 * you do not have constraints on the obj is to have the drag frame centered
80 * around the cursor. Set centerFrame to true for this effect.
81 * @property centerFrame
86 <span id='Ext-dd-DDProxy-method-createFrame'> /**
87 </span> * Creates the proxy element if it does not yet exist
90 createFrame: function() {
92 var body = document.body;
94 if (!body || !body.firstChild) {
95 setTimeout( function() { self.createFrame(); }, 50 );
99 var div = this.getDragEl();
102 div = document.createElement("div");
103 div.id = this.dragElId;
106 s.position = "absolute";
107 s.visibility = "hidden";
108 s.cursor = "move";
109 s.border = "2px solid #aaa";
112 // appendChild can blow up IE if invoked prior to the window load event
113 // while rendering a table. It is possible there are other scenarios
114 // that would cause this to happen as well.
115 body.insertBefore(div, body.firstChild);
119 <span id='Ext-dd-DDProxy-method-initFrame'> /**
120 </span> * Initialization for the drag frame element. Must be called in the
121 * constructor of all subclasses
124 initFrame: function() {
128 applyConfig: function() {
131 this.resizeFrame = (this.config.resizeFrame !== false);
132 this.centerFrame = (this.config.centerFrame);
133 this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
136 <span id='Ext-dd-DDProxy-method-showFrame'> /**
137 </span> * Resizes the drag frame to the dimensions of the clicked object, positions
138 * it over the object, and finally displays it
140 * @param {Number} iPageX X click position
141 * @param {Number} iPageY Y click position
144 showFrame: function(iPageX, iPageY) {
145 var el = this.getEl();
146 var dragEl = this.getDragEl();
147 var s = dragEl.style;
151 if (this.centerFrame) {
152 this.setDelta( Math.round(parseInt(s.width, 10)/2),
153 Math.round(parseInt(s.height, 10)/2) );
156 this.setDragElPos(iPageX, iPageY);
158 Ext.fly(dragEl).show();
161 <span id='Ext-dd-DDProxy-method-_resizeProxy'> /**
162 </span> * The proxy is automatically resized to the dimensions of the linked
163 * element when a drag is initiated, unless resizeFrame is set to false
164 * @method _resizeProxy
167 _resizeProxy: function() {
168 if (this.resizeFrame) {
169 var el = this.getEl();
170 Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
174 // overrides Ext.dd.DragDrop
175 b4MouseDown: function(e) {
176 var x = e.getPageX();
177 var y = e.getPageY();
178 this.autoOffset(x, y);
179 this.setDragElPos(x, y);
182 // overrides Ext.dd.DragDrop
183 b4StartDrag: function(x, y) {
184 // show the drag frame
185 this.showFrame(x, y);
188 // overrides Ext.dd.DragDrop
189 b4EndDrag: function(e) {
190 Ext.fly(this.getDragEl()).hide();
193 // overrides Ext.dd.DragDrop
194 // By default we try to move the element to the last location of the frame.
195 // This is so that the default behavior mirrors that of Ext.dd.DD.
196 endDrag: function(e) {
198 var lel = this.getEl();
199 var del = this.getDragEl();
201 // Show the drag frame briefly so we can get its position
202 del.style.visibility = "";
205 // Hide the linked element before the move to get around a Safari
207 lel.style.visibility = "hidden";
208 Ext.dd.DDM.moveToEl(lel, del);
209 del.style.visibility = "hidden";
210 lel.style.visibility = "";
215 beforeMove : function(){
219 afterDrag : function(){
223 toString: function() {
224 return ("DDProxy " + this.id);