Drag and Drop in custom components..

Question

hello friends,
I am trying to devlop a schedule component. on part of this i trying to develop a functionality where the user can reschedure the appointment by drag and drop.  the dragdrop event in the container component is not triggered when ther user drag the appointment and drop it in the another container. can any one help me on this please. i have given below my source codes.
Testbox.as
package layouts.DayViewControl.containers
    import mx.core.Container;
    public class TestBox extends Container
        private var __timeAndXYCoOrdArray:Array;
        private var __xyDiff:int=0;
        public function TestBox()
            super();
            __timeAndXYCoOrdArray=new Array();
        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            var totalSlots:int=24*2;
            var __lineThickness:int=1;
            var __lineAlpha:int=0.2;
            var boxHeight:uint=unscaledHeight/totalSlots;
            graphics.clear();
            var xPos:int=0;
            var ypos:int=0;
            graphics.lineStyle(2,0x000000,0.5);
            graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
            var __boxHeight:int=unscaledHeight/totalSlots;
            var __minusCount:int=1;
            for(var i:int=0;i<totalSlots;i++){
                var timeStr:String="";
                if(i%2 == 0){
                    __lineThickness=2;
                    graphics.lineStyle(__lineThickness,0x000000,0.4);               
                }else{
                    __lineThickness=1;
                    graphics.lineStyle(__lineThickness,0x000000,0.2);   
                graphics.moveTo(xPos,ypos);
                var tempYpos:int=ypos;
                if(__xyDiff == 0){
                    __xyDiff=ypos-xPos;
                graphics.lineTo(xPos+unscaledWidth,tempYpos);
                ypos+=boxHeight;
                var newYPos:int=0;
                if(i == 0){
                    timeStr="00:00";
                }else if(i%2 != 0){
                    if(i<=9){
                        timeStr="0"+(i-__minusCount).toString()+":30";
                    }else{
                        timeStr=(i-__minusCount).toString()+":30";                       
                    newYPos=ypos-__xyDiff;
                }else if(i%2 == 0){
                    if(i<=9){
                        timeStr="0"+(i-__minusCount).toString()+":00";
                    }else{
                        timeStr=(i-__minusCount).toString()+":00";                       
                    __minusCount+=1;
                    newYPos=ypos-__xyDiff;
                __timeAndXYCoOrdArray.push({XPos:xPos,YPos:newYPos,Time:timeStr});
        public function getXFromtime(inputTime:String):int{
            var returnVal:int=0;
            if(inputTime && inputTime != ""){
                for (var j:int=0;j<__timeAndXYCoOrdArray.length;j++){
                    if(__timeAndXYCoOrdArray[j].Time.toString() == inputTime){
                        returnVal=parseInt(__timeAndXYCoOrdArray[j].XPos)
                        break;
            return returnVal;
        public function getYFromtime(inputTime:String):int{
            var returnVal:int=0;
            if(inputTime && inputTime != ""){
                for (var j:int=0;j<__timeAndXYCoOrdArray.length;j++){
                    if(__timeAndXYCoOrdArray[j].Time.toString() == inputTime){
                        returnVal=parseInt(__timeAndXYCoOrdArray[j].YPos)
                        break;
            return returnVal;
        public function getTimeDifference():int{
            return __xyDiff;
TimeDividerLines.as
package layouts.DayViewControl
    import flash.events.MouseEvent;
    import flash.utils.Dictionary;
    import layouts.DayViewControl.containers.TestBox;
    import mx.collections.ArrayCollection;
    import mx.core.DragSource;
    import mx.core.EventPriority;
    import mx.core.UIComponent;
    import mx.events.DragEvent;
    import mx.managers.DragManager;
    public class TimeDividerLines extends TestBox
        private var __linesPerHour:int=4;
        private var __currentDate:Date;
        private var __timeAndXYCoOrdArray:Array;
        private var __dataComponentArry:Array;
        private var __totalAppointment:int=5;
        private var __xyDiff:int=0;
        private var __apptDataInfoArry:Array;
        private var __dataProviderChanged:Boolean=false;
        private var __reArrangeDataArrayCol:ArrayCollection;
        private var __sortedArrayCollection:ArrayCollection;
        private var __dragDropEnabled:Boolean=false;
        public function TimeDividerLines()
            super();
            //__timeAndXYCoOrdArray=new Array();
            __dataComponentArry=new Array();
            __apptDataInfoArry=new Array();
            __sortedArrayCollection=new ArrayCollection();   
        public function set dragDropEnabled(inputVal:Boolean):void{
            if(inputVal){
                //set youself for drag and drop event
                this.addEventListener(DragEvent.DRAG_ENTER,dragEnterEventHandler,false,EventPriority.DEFA ULT_HANDLER);
                this.addEventListener(DragEvent.DRAG_OVER,dragOverEventHandler,false,EventPriority.DEFAUL T_HANDLER);
                this.addEventListener(DragEvent.DRAG_DROP,dragDropEventHandler,false,EventPriority.DEFAUL T_HANDLER);
                this.addEventListener(DragEvent.DRAG_COMPLETE,dropCompleteHandler);               
            }else{
                this.removeEventListener(DragEvent.DRAG_ENTER,dragEnterEventHandler,false);
                this.removeEventListener(DragEvent.DRAG_OVER,dragOverEventHandler,false);
                this.removeEventListener(DragEvent.DRAG_DROP,dragDropEventHandler,false);               
            __dragDropEnabled=inputVal;
        private function dropCompleteHandler(event:DragEvent):void{
            trace("inside drop complete handler");
        private function dragEnterEventHandler(event:DragEvent):void{
            if(event.dragSource.hasFormat("Appointment")){
                var dropTarget:UIComponent=UIComponent(event.currentTarget);
                DragManager.acceptDragDrop(dropTarget);           
                DragManager.showFeedback(event.ctrlKey ? DragManager.COPY : DragManager.MOVE);   
                return;
            DragManager.showFeedback(DragManager.NONE);
        private function dragOverEventHandler(event:DragEvent):void{
            /* if(event.dragSource.hasFormat("Appointment")){
                if(event.ctrlKey){
                    DragManager.showFeedback(DragManager.COPY);
                    return
                }else{
                    DragManager.showFeedback(DragManager.MOVE);
                    return
            DragManager.showFeedback(DragManager.NONE); */
        private function dragDropEventHandler(event:DragEvent):void{
            //We need to do two things here. you need to add the dropped data to the data provider list.
            //and need need to update this entry to DB
             /* if(event.dragSource.hasFormat("Appointment")){
                 var draggedbox:AppointmentDisplayBox=event.dragSource.dataForFormat("Appointment") as AppointmentDisplayBox;
                 var dropBox:TimeDividerLines=event.currentTarget as TimeDividerLines;
                 //create a new copy
                 var newBox:AppointmentDisplayBox=new AppointmentDisplayBox();
                 newBox=draggedbox;
                 newBox.x=dropBox.mouseX;
                 newBox.y=dropBox.mouseY;
                 this.addChild(newBox);
             trace("11111111111111111111111111111111111111111")
        private function mouseDownHandler(event:MouseEvent):void{
            var draginit:AppointmentDisplayBox=AppointmentDisplayBox(event.currentTarget);
            var ds:DragSource=new DragSource();
            ds.addData(draginit,"Appointment");
            DragManager.doDrag(draginit,ds,event);
        override protected function createChildren():void{
            super.createChildren();
        override protected function commitProperties():void{
             if(__dataProviderChanged){
                 __dataComponentArry=new Array();
                for (var k:int=0;k<__apptDataInfoArry.length;k++){
                    var tempDispBox:AppointmentDisplayBox=new AppointmentDisplayBox();
                    tempDispBox.currentDate=this.currentDate;
                    tempDispBox.startTime=__apptDataInfoArry[k].StartTime.toString();
                    tempDispBox.endTime=__apptDataInfoArry[k].EndTime.toString();
                    tempDispBox.apptDataXml=__apptDataInfoArry[k].Data as XML;       
                    tempDispBox.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);           
                    this.addChild(tempDispBox);
                    __dataComponentArry.push(tempDispBox);
                __dataProviderChanged=false;
        private function sortTheCollectionValues(__inputArrayCol:ArrayCollection):ArrayCollection{
            var returnArrayCollection:ArrayCollection=new ArrayCollection();
            var tempArray:Array=new Array();
            for(var i:int=0;i<__inputArrayCol.length;i++){
                tempArray.push({Length:(__inputArrayCol[i] as Array).length,Index:i});
            tempArray.sortOn("Length",Array.DESCENDING|Array.NUMERIC);
            for(var j:int=0;j<tempArray.length;j++){
                returnArrayCollection.addItem(__inputArrayCol[tempArray[j].Index]);
            return returnArrayCollection;
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            if(__dataComponentArry.length > 0){
                __sortedArrayCollection=new ArrayCollection();
                sortArray(__dataComponentArry);
            if(__sortedArrayCollection.length > 0 ){
                //you need to sort the arraycollection based on the length first to draw the highest no. child array first
                __sortedArrayCollection=sortTheCollectionValues(__sortedArrayCollection);
                var appGap:int=2;
                var endGap:int=10;
                //var drawnApptObj:Array=new Array();
                var existingChildArray:Array=new Array();   
                var drawnApptObj:Dictionary=new Dictionary();
                for(var l:int=0;l<__sortedArrayCollection.length;l++){
                    var apptWidth:int=0;
                    var innerArry:Array=__sortedArrayCollection[l] as Array;
                    existingChildArray=new Array();
                    //you need to recalculate the width
                    //for the first iteration you need to sort by height
                    //if(l == 0){
                    //    innerArry.sortOn("apptHeight",Array.NUMERIC|Array.DESCENDING);
                    //}else{
                        innerArry.sortOn(["isChild","apptHeight"],Array.NUMERIC|Array.DESCENDING);   
                    //innerArry.sortOn("apptHeight",Array.NUMERIC|Array.DESCENDING);
                    //first we need to find out any intersection appointment is there
                    var count:int=0;
                     for each(var tempApptDispBox:AppointmentDisplayBox in innerArry){
                        if(drawnApptObj[tempApptDispBox] == tempApptDispBox){
                            if(apptWidth < tempApptDispBox.width){
                                apptWidth=tempApptDispBox.width;
                                existingChildArray.push({index:count,object:tempApptDispBox});
                        count++;
                    if(apptWidth == 0){
                        apptWidth=(unscaledWidth - (endGap + (appGap*innerArry.length)))/innerArry.length;
                    //now you need to layout the childrens
                    var canDraw:Boolean=false;
                    var ismatch:Boolean=false;
                    for (var childCnt:int=0;childCnt < innerArry.length;childCnt++){
                         var tempDispBox:AppointmentDisplayBox=innerArry[childCnt] as AppointmentDisplayBox;
                         for (var i:int=0;i<existingChildArray.length;i++){
                             if(existingChildArray[i].index == childCnt){
                                 ismatch=true;
                                 break;
                        if(childCnt == 0 && !ismatch){
                            tempDispBox.x=this.getXFromtime(tempDispBox.startTime.toString())+2;
                            canDraw=true;
                        }else if(existingChildArray.indexOf(childCnt) > -1 && childCnt != 0){
                            //tempDispBox.x=(existingChildArray[childCnt] as AppointmentDisplayBox).x+apptWidth+appGap;
                            canDraw=false;
                        }else if(childCnt != 0 && !ismatch){
                            tempDispBox.x=((existingChildArray[childCnt-1].object) as AppointmentDisplayBox).x+apptWidth+appGap;
                            canDraw=true;
                        if(canDraw){
                            tempDispBox.y=this.getYFromtime(tempDispBox.startTime.toString());   
                            tempDispBox.width=apptWidth;
                            tempDispBox.height=tempDispBox.apptHeight-2;
                            if(tempDispBox.isChild){
                                drawnApptObj[tempDispBox]=tempDispBox;
                            existingChildArray.push({index:childCnt,object:tempDispBox});
                        canDraw=false;
                        ismatch=false;
            //first we need to sort the component array based on the height property to position the biggest appointment first
        private function sortArray(tempArry:Array):void{
            //var tempArry:Array=arrayClone(__datacompArray);
             for(var i:int=0;i<tempArry.length;i++){
                 var tempDispBox:AppointmentDisplayBox=tempArry[i] as AppointmentDisplayBox;
                var start:int=this.getYFromtime(tempDispBox.startTime.toString());
                var end:int=this.getYFromtime(tempDispBox.endTime.toString());
                tempDispBox.apptHeight=end-start;
            var indexArray:Array=new Array();
            var canContinue:Boolean=false;
            var loopArray:Array=new Array();
            loopArray=tempArry.concat(); // this will copy the array to loopArray
            var copyArry:Array=new Array();
            var k:int=0;
            while(k<loopArray.length){
                loopArray.sortOn("apptHeight",Array.NUMERIC|Array.DESCENDING);
                if(indexArray.length > 0){
                    if(indexArray.indexOf(k) >= 0){
                        canContinue=false;
                    }else{
                        canContinue=true;
                }else{
                    canContinue=true;
                if(canContinue){
                    var newArry:Array=new Array();
                    //newArry.push(tempArry[k]);                   
                    for (var innerCnt:int=0;innerCnt<loopArray.length;innerCnt++){
                        var locCanContinue:Boolean=false;
                        if(indexArray.length > 0){
                            if(indexArray.indexOf(innerCnt) >= 0){
                                locCanContinue=false;
                            }else{
                                locCanContinue=true;
                        }else{
                            locCanContinue=true;
                        if(locCanContinue && k != innerCnt){
                            var outerstartTime:Number=parseFloat(loopArray[k].startTime.toString().replace(":","."));
                            var outerendtime:Number=parseFloat(loopArray[k].endTime.toString().replace(":","."));
                            var innerStartTime:Number=parseFloat(loopArray[innerCnt].startTime.toString().replace(":","." ));
                            var innerEndtime:Number=parseFloat(loopArray[innerCnt].endTime.toString().replace(":","."));
                            if(outerstartTime == innerStartTime && outerendtime == innerEndtime){
                                //newArry.push(tempArry.splice(innerCnt,1));
                                newArry.push(loopArray[innerCnt]);
                                indexArray.push(innerCnt);
                            }else if(outerstartTime == innerStartTime && outerendtime > innerEndtime){
                                //newArry.push(tempArry.splice(innerCnt,1));
                                newArry.push(loopArray[innerCnt]);
                                indexArray.push(innerCnt);
                            }else if(outerstartTime  < innerStartTime && outerendtime == innerEndtime){
                                //newArry.push(tempArry.splice(innerCnt,1));
                                newArry.push(loopArray[innerCnt]);
                                indexArray.push(innerCnt);
                            }else if(outerstartTime  < innerStartTime && outerendtime > innerEndtime){
                                //newArry.push(tempArry.splice(innerCnt,1));
                                newArry.push(loopArray[innerCnt]);
                                indexArray.push(innerCnt);
                            }else if(outerstartTime > innerStartTime && outerendtime > innerEndtime && innerEndtime > outerstartTime){
                                //newArry.push(tempArry.splice(innerCnt,1));
                                newArry.push(loopArray[innerCnt]);
                                loopArray[innerCnt].isChild=true;
                                //indexArray.push(innerCnt);
                            }else if(outerstartTime < innerStartTime && outerendtime < innerEndtime && innerStartTime < outerendtime){
                                //newArry.push(tempArry.splice(innerCnt,1));
                                newArry.push(loopArray[innerCnt]);
                                loopArray[innerCnt].isChild=true;
                                //indexArray.push(innerCnt);
                            }else if(outerstartTime == innerStartTime && outerendtime < innerEndtime){
                                newArry.push(loopArray[innerCnt]);
                                loopArray[innerCnt].isChild=true;
                            }else if(outerstartTime > innerStartTime && outerendtime == innerEndtime){
                                newArry.push(loopArray[innerCnt]);
                                loopArray[innerCnt].isChild=true;
                    //newArry.push(tempArry.splice(k,1));
                    indexArray.push(k);
                    newArry.push(loopArray[k]);
                    __sortedArrayCollection.addItem(newArry);                   
                copyArry=loopArray.concat();
                loopArray=new Array();
                for (var j:int=0;j<copyArry.length;j++){
                    if(indexArray.indexOf(j) < 0){
                        loopArray.push(copyArry[j]);
                indexArray=new Array();               
        private function arrayClone(source:Array):Array{
            var returnArray:Array=new Array();
            for(var j:int=0;j<source.length;j++){
                returnArray.push(source[j]);
            return returnArray;
        public function set currentDate(inputVal:Date):void{
            if(__currentDate != inputVal){
                __currentDate=inputVal;
        public function get currentDate():Date{
            return __currentDate;
        public function set apptDataArray(inputVal:Array):void{
            if(!__dataProviderChanged && inputVal.length > 0){
                __apptDataInfoArry=inputVal;
                __dataProviderChanged=true;
                invalidateProperties();
                invalidateDisplayList();
AppointmentDisplayBox.as
package layouts.DayViewControl
    import mx.controls.TextInput;
    import mx.core.UIComponent;
    public class AppointmentDisplayBox extends UIComponent
        private var __startTime:String;
        private var __EndTime:String;
        private var __currentDate:Date;
        private var __apptData:XML;
        private var __height:Number;
        private var __isChild:Boolean=false;
        private var __modifiedWidth:Boolean=false;
        private var __docNameLable:TextInput;
        private var __appDetails:TextInput;
        public function AppointmentDisplayBox()
            super();
            this.setStyle("horizontalScrollPolicy","off");
            this.setStyle("verticalScrollPolicy","off");
            this.setStyle("borderStyle","solid");
            this.setStyle("verticalGap","0");
            this.setStyle("borderStyle","outset");       
            this.buttonMode=true;           
        protected override function createChildren():void{
            super.createChildren();
            if(!__docNameLable){
                __docNameLable=new TextInput();
                __docNameLable.editable=false;
                __docNameLable.setStyle("horizontalScrollPolicy","off");
                __docNameLable.setStyle("verticalScrollPolicy","off");
                __docNameLable.setStyle("borderStyle","none");
                //__docNameLable.setStyle("borderThickness","0");
                __docNameLable.buttonMode=true;
                addChild(__docNameLable);
            if(!__appDetails){
                __appDetails=new TextInput();
                __appDetails.editable=false;   
                __appDetails.setStyle("horizontalScrollPolicy","off");
                __appDetails.setStyle("verticalScrollPolicy","off");
                __appDetails.setStyle("borderStyle","none");
                 __appDetails.setStyle("backgroundColor","0xB1FB17");
                 __appDetails.buttonMode=true;
            //    __appDetails.setStyle("borderThickness","0");
                addChild(__appDetails);
        protected override function commitProperties():void{
            super.commitProperties();
             if(__apptData != null){
                __docNameLable.text=__apptData.DocName.toString();
                __appDetails.text=__apptData.PatientID.toString()+"\n"+__apptData.Description.toString();                
                invalidateDisplayList();
        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            __docNameLable.setActualSize(unscaledWidth-1,20);
            __docNameLable.move(1,1);
            graphics.clear();
            var lineColor:uint=0x000000;
            graphics.lineStyle(1,lineColor,1);
            graphics.beginFill(0xFEFDFD,1)
            graphics.drawRect(0,0,unscaledWidth,22);
            graphics.endFill();
            __appDetails.setActualSize(unscaledWidth-1,unscaledHeight-22);
            __appDetails.move(1,23);
            graphics.drawRect(0,22,unscaledWidth,unscaledHeight-20);
        public function set startTime(inputVal:String):void{
            __startTime=inputVal;
        public function get startTime():String{
            return __startTime;
        public function set endTime(inputVal:String):void{
            __EndTime=inputVal;
        public function get endTime():String{
            return __EndTime;
        public function set currentDate(inputVal:Date):void{
            __currentDate=inputVal;
        public function get currentDate():Date{
            return __currentDate;
        public function set apptHeight(inputVal:Number):void{
            __height=inputVal;
        public function get apptHeight():Number{
            return __height;
        public function set isChild(inputVal:Boolean):void{
            __isChild=inputVal;
        public function get isChild():Boolean{
            return __isChild;
        public function set isModifiedWidth(inputVal:Boolean):void{
            __modifiedWidth=inputVal;
        public function get isModifiedWidth():Boolean{
            return __modifiedWidth;
        public function set apptDataXml(inputVal:XML):void{
            if(__apptData != inputVal){
                __apptData=inputVal;
                invalidateProperties();
                invalidateDisplayList();
        public function get apptDataXml():XML{
            return __apptData;
Test.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:layouts="layouts.*"
    xmlns:DayViewControl="layouts.DayViewControl.*" xmlns:test="layouts.DayViewControl.containers.*">
    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;
            import layouts.DayViewControl.TimeDividerLines;
            import mx.events.DragEvent;
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import layouts.DayViewControl.AppointmentDisplayBox;
            private function mouseDownHandler(event:MouseEvent):void{
                var dragint:AppointmentDisplayBox=AppointmentDisplayBox(event.currentTarget);
                //var dragint:TextInput=TextInput(event.currentTarget);
                var ds:DragSource=new DragSource();
                ds.addData(dragint,"Appoitment");
                DragManager.doDrag(dragint,ds,event);               
            private function dragEnterHandler(event:DragEvent):void{
                if(event.dragSource.hasFormat("Appoitment")){
                    var droptarget:TimeDividerLines=TimeDividerLines(event.currentTarget);
                    DragManager.acceptDragDrop(droptarget);
                    DragManager.showFeedback(event.ctrlKey?DragManager.COPY:DragManager.MOVE);
                    return;
                DragManager.showFeedback(DragManager.NONE);
            private function dragDropHandler(event:DragEvent):void{
                if(event.dragSource.hasFormat("Appoitment")){
                    var droppedObj:AppointmentDisplayBox=AppointmentDisplayBox(event.dragSource.dataForFormat("Ap poitment"));
                    //var droppedObj:TextInput=TextInput(event.dragSource.dataForFormat("Appoitment"));
                    var dropTarget:TimeDividerLines=TimeDividerLines(event.currentTarget);
                    droppedObj.x=dropTarget.mouseX;
                    droppedObj.y=dropTarget.mouseY;
                    dropTarget.addChild(droppedObj);
        ]]>
    </mx:Script>
    <mx:HBox width="100%" height="100%">
        <DayViewControl:TimeDividerLines width="50%" height="100%">
            <DayViewControl:AppointmentDisplayBox width="50" height="100" mouseDown="mouseDownHandler(event)"/>
        </DayViewControl:TimeDividerLines>
        <DayViewControl:TimeDividerLines width="50%" height="100%" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)"/>
    </mx:HBox>
</mx:Application>

Answer 1

First 3 .as are the component
source. in the last test.mxml file i have written the drag and drop functionality.
can any help me?? please