DragSource.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:13k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.dd.DragSource
  3.  * @extends Ext.dd.DDProxy
  4.  * A simple class that provides the basic implementation needed to make any element draggable.
  5.  * @constructor
  6.  * @param {Mixed} el The container element
  7.  * @param {Object} config
  8.  */
  9. Ext.dd.DragSource = function(el, config){
  10.     this.el = Ext.get(el);
  11.     if(!this.dragData){
  12.         this.dragData = {};
  13.     }
  14.     
  15.     Ext.apply(this, config);
  16.     
  17.     if(!this.proxy){
  18.         this.proxy = new Ext.dd.StatusProxy();
  19.     }
  20.     Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
  21.           {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
  22.     
  23.     this.dragging = false;
  24. };
  25. Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {
  26.     /**
  27.      * @cfg {String} ddGroup
  28.      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
  29.      * interact with other drag drop objects in the same group (defaults to undefined).
  30.      */
  31.     /**
  32.      * @cfg {String} dropAllowed
  33.      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
  34.      */
  35.     dropAllowed : "x-dd-drop-ok",
  36.     /**
  37.      * @cfg {String} dropNotAllowed
  38.      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
  39.      */
  40.     dropNotAllowed : "x-dd-drop-nodrop",
  41.     /**
  42.      * Returns the data object associated with this drag source
  43.      * @return {Object} data An object containing arbitrary data
  44.      */
  45.     getDragData : function(e){
  46.         return this.dragData;
  47.     },
  48.     // private
  49.     onDragEnter : function(e, id){
  50.         var target = Ext.dd.DragDropMgr.getDDById(id);
  51.         this.cachedTarget = target;
  52.         if(this.beforeDragEnter(target, e, id) !== false){
  53.             if(target.isNotifyTarget){
  54.                 var status = target.notifyEnter(this, e, this.dragData);
  55.                 this.proxy.setStatus(status);
  56.             }else{
  57.                 this.proxy.setStatus(this.dropAllowed);
  58.             }
  59.             
  60.             if(this.afterDragEnter){
  61.                 /**
  62.                  * An empty function by default, but provided so that you can perform a custom action
  63.                  * when the dragged item enters the drop target by providing an implementation.
  64.                  * @param {Ext.dd.DragDrop} target The drop target
  65.                  * @param {Event} e The event object
  66.                  * @param {String} id The id of the dragged element
  67.                  * @method afterDragEnter
  68.                  */
  69.                 this.afterDragEnter(target, e, id);
  70.             }
  71.         }
  72.     },
  73.     /**
  74.      * An empty function by default, but provided so that you can perform a custom action
  75.      * before the dragged item enters the drop target and optionally cancel the onDragEnter.
  76.      * @param {Ext.dd.DragDrop} target The drop target
  77.      * @param {Event} e The event object
  78.      * @param {String} id The id of the dragged element
  79.      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  80.      */
  81.     beforeDragEnter : function(target, e, id){
  82.         return true;
  83.     },
  84.     // private
  85.     alignElWithMouse: function() {
  86.         Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
  87.         this.proxy.sync();
  88.     },
  89.     // private
  90.     onDragOver : function(e, id){
  91.         var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
  92.         if(this.beforeDragOver(target, e, id) !== false){
  93.             if(target.isNotifyTarget){
  94.                 var status = target.notifyOver(this, e, this.dragData);
  95.                 this.proxy.setStatus(status);
  96.             }
  97.             if(this.afterDragOver){
  98.                 /**
  99.                  * An empty function by default, but provided so that you can perform a custom action
  100.                  * while the dragged item is over the drop target by providing an implementation.
  101.                  * @param {Ext.dd.DragDrop} target The drop target
  102.                  * @param {Event} e The event object
  103.                  * @param {String} id The id of the dragged element
  104.                  * @method afterDragOver
  105.                  */
  106.                 this.afterDragOver(target, e, id);
  107.             }
  108.         }
  109.     },
  110.     /**
  111.      * An empty function by default, but provided so that you can perform a custom action
  112.      * while the dragged item is over the drop target and optionally cancel the onDragOver.
  113.      * @param {Ext.dd.DragDrop} target The drop target
  114.      * @param {Event} e The event object
  115.      * @param {String} id The id of the dragged element
  116.      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  117.      */
  118.     beforeDragOver : function(target, e, id){
  119.         return true;
  120.     },
  121.     // private
  122.     onDragOut : function(e, id){
  123.         var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
  124.         if(this.beforeDragOut(target, e, id) !== false){
  125.             if(target.isNotifyTarget){
  126.                 target.notifyOut(this, e, this.dragData);
  127.             }
  128.             this.proxy.reset();
  129.             if(this.afterDragOut){
  130.                 /**
  131.                  * An empty function by default, but provided so that you can perform a custom action
  132.                  * after the dragged item is dragged out of the target without dropping.
  133.                  * @param {Ext.dd.DragDrop} target The drop target
  134.                  * @param {Event} e The event object
  135.                  * @param {String} id The id of the dragged element
  136.                  * @method afterDragOut
  137.                  */
  138.                 this.afterDragOut(target, e, id);
  139.             }
  140.         }
  141.         this.cachedTarget = null;
  142.     },
  143.     /**
  144.      * An empty function by default, but provided so that you can perform a custom action before the dragged
  145.      * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
  146.      * @param {Ext.dd.DragDrop} target The drop target
  147.      * @param {Event} e The event object
  148.      * @param {String} id The id of the dragged element
  149.      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  150.      */
  151.     beforeDragOut : function(target, e, id){
  152.         return true;
  153.     },
  154.     
  155.     // private
  156.     onDragDrop : function(e, id){
  157.         var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
  158.         if(this.beforeDragDrop(target, e, id) !== false){
  159.             if(target.isNotifyTarget){
  160.                 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
  161.                     this.onValidDrop(target, e, id);
  162.                 }else{
  163.                     this.onInvalidDrop(target, e, id);
  164.                 }
  165.             }else{
  166.                 this.onValidDrop(target, e, id);
  167.             }
  168.             
  169.             if(this.afterDragDrop){
  170.                 /**
  171.                  * An empty function by default, but provided so that you can perform a custom action
  172.                  * after a valid drag drop has occurred by providing an implementation.
  173.                  * @param {Ext.dd.DragDrop} target The drop target
  174.                  * @param {Event} e The event object
  175.                  * @param {String} id The id of the dropped element
  176.                  * @method afterDragDrop
  177.                  */
  178.                 this.afterDragDrop(target, e, id);
  179.             }
  180.         }
  181.         delete this.cachedTarget;
  182.     },
  183.     /**
  184.      * An empty function by default, but provided so that you can perform a custom action before the dragged
  185.      * item is dropped onto the target and optionally cancel the onDragDrop.
  186.      * @param {Ext.dd.DragDrop} target The drop target
  187.      * @param {Event} e The event object
  188.      * @param {String} id The id of the dragged element
  189.      * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
  190.      */
  191.     beforeDragDrop : function(target, e, id){
  192.         return true;
  193.     },
  194.     // private
  195.     onValidDrop : function(target, e, id){
  196.         this.hideProxy();
  197.         if(this.afterValidDrop){
  198.             /**
  199.              * An empty function by default, but provided so that you can perform a custom action
  200.              * after a valid drop has occurred by providing an implementation.
  201.              * @param {Object} target The target DD 
  202.              * @param {Event} e The event object
  203.              * @param {String} id The id of the dropped element
  204.              * @method afterInvalidDrop
  205.              */
  206.             this.afterValidDrop(target, e, id);
  207.         }
  208.     },
  209.     // private
  210.     getRepairXY : function(e, data){
  211.         return this.el.getXY();  
  212.     },
  213.     // private
  214.     onInvalidDrop : function(target, e, id){
  215.         this.beforeInvalidDrop(target, e, id);
  216.         if(this.cachedTarget){
  217.             if(this.cachedTarget.isNotifyTarget){
  218.                 this.cachedTarget.notifyOut(this, e, this.dragData);
  219.             }
  220.             this.cacheTarget = null;
  221.         }
  222.         this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
  223.         if(this.afterInvalidDrop){
  224.             /**
  225.              * An empty function by default, but provided so that you can perform a custom action
  226.              * after an invalid drop has occurred by providing an implementation.
  227.              * @param {Event} e The event object
  228.              * @param {String} id The id of the dropped element
  229.              * @method afterInvalidDrop
  230.              */
  231.             this.afterInvalidDrop(e, id);
  232.         }
  233.     },
  234.     // private
  235.     afterRepair : function(){
  236.         if(Ext.enableFx){
  237.             this.el.highlight(this.hlColor || "c3daf9");
  238.         }
  239.         this.dragging = false;
  240.     },
  241.     /**
  242.      * An empty function by default, but provided so that you can perform a custom action after an invalid
  243.      * drop has occurred.
  244.      * @param {Ext.dd.DragDrop} target The drop target
  245.      * @param {Event} e The event object
  246.      * @param {String} id The id of the dragged element
  247.      * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
  248.      */
  249.     beforeInvalidDrop : function(target, e, id){
  250.         return true;
  251.     },
  252.     // private
  253.     handleMouseDown : function(e){
  254.         if(this.dragging) {
  255.             return;
  256.         }
  257.         var data = this.getDragData(e);
  258.         if(data && this.onBeforeDrag(data, e) !== false){
  259.             this.dragData = data;
  260.             this.proxy.stop();
  261.             Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
  262.         } 
  263.     },
  264.     /**
  265.      * An empty function by default, but provided so that you can perform a custom action before the initial
  266.      * drag event begins and optionally cancel it.
  267.      * @param {Object} data An object containing arbitrary data to be shared with drop targets
  268.      * @param {Event} e The event object
  269.      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  270.      */
  271.     onBeforeDrag : function(data, e){
  272.         return true;
  273.     },
  274.     /**
  275.      * An empty function by default, but provided so that you can perform a custom action once the initial
  276.      * drag event has begun.  The drag cannot be canceled from this function.
  277.      * @param {Number} x The x position of the click on the dragged object
  278.      * @param {Number} y The y position of the click on the dragged object
  279.      */
  280.     onStartDrag : Ext.emptyFn,
  281.     // private override
  282.     startDrag : function(x, y){
  283.         this.proxy.reset();
  284.         this.dragging = true;
  285.         this.proxy.update("");
  286.         this.onInitDrag(x, y);
  287.         this.proxy.show();
  288.     },
  289.     // private
  290.     onInitDrag : function(x, y){
  291.         var clone = this.el.dom.cloneNode(true);
  292.         clone.id = Ext.id(); // prevent duplicate ids
  293.         this.proxy.update(clone);
  294.         this.onStartDrag(x, y);
  295.         return true;
  296.     },
  297.     /**
  298.      * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
  299.      * @return {Ext.dd.StatusProxy} proxy The StatusProxy
  300.      */
  301.     getProxy : function(){
  302.         return this.proxy;  
  303.     },
  304.     /**
  305.      * Hides the drag source's {@link Ext.dd.StatusProxy}
  306.      */
  307.     hideProxy : function(){
  308.         this.proxy.hide();  
  309.         this.proxy.reset(true);
  310.         this.dragging = false;
  311.     },
  312.     // private
  313.     triggerCacheRefresh : function(){
  314.         Ext.dd.DDM.refreshCache(this.groups);
  315.     },
  316.     // private - override to prevent hiding
  317.     b4EndDrag: function(e) {
  318.     },
  319.     // private - override to prevent moving
  320.     endDrag : function(e){
  321.         this.onEndDrag(this.dragData, e);
  322.     },
  323.     // private
  324.     onEndDrag : function(data, e){
  325.     },
  326.     
  327.     // private - pin to cursor
  328.     autoOffset : function(x, y) {
  329.         this.setDelta(-12, -20);
  330.     }    
  331. });