Drag and drop components

hi folks,
am using jdev 11.1.1.5.0 - adfbc.
when am i wondering about drag and drop components in ADF 11g.
i get some of the example.
http://www.oracle.com/technetwork/developer-tools/adf/learnmore/60-table-drag-n-drop-sample-176981.pdf
http://www.baigzeeshan.com/2011/01/drag-and-drop-collection-in-oracle-adf.html
http://www.baigzeeshan.com/2010/07/implementing-drag-and-drop-functionaly.html
http://www.gebs.ro/blog/oracle/adf-drag-and-drop-hints/
http://www.gebs.ro/blog/oracle/oracle-adf-overcome-adf-restrictions-on-copying-components-with-drag-n-drop/
ok fine. is there any other links. make more interactive in UI
need is :
make my user to feel free use my application.

What about the product documentation ?
http://docs.oracle.com/cd/E23943_01/web.1111/b31973/af_dnd.htm#CIHCHGIF
Also, the following book:
has a chapter (chapter 14) on drag and drop
http://www.amazon.com/Oracle-Fusion-Developer-Guide-Applications/dp/0071622543/ref=sr_1_cc_1?s=aps&ie=UTF8&qid=1343975521&sr=1-1-catcorr&keywords=Oracle+Fusion+Developer+Guide
Frank

Similar Messages

Dragging (and dropping) components in a panel

I want to learn how to move a component or image around in a panel and drop it. To also drop other images and then connect the images with a connecting line. I don't really need to go into the Drag and Drop API because I'm just staying in my GUI. Can someone direct me to a resource that might help me?
Gracias,
Miguel

Hi!
Here's a small program with a draggable Button.
Have a look at the class 'DraggableButton'.
Cheers Tom
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class DragButton extends JFrame {
     public DragButton()     {
          setDefaultCloseOperation(EXIT_ON_CLOSE);
          getContentPane().setLayout(null);
          DraggableButton b = new DraggableButton("Drag me");
          getContentPane().add(b);
          b.setBounds(30,30,100,30);
     public static void main(String args[]) {
          DragButton f = new DragButton();
          f.setBounds(200,200,400,400);
          f.setVisible(true);
class DraggableButton extends JButton implements MouseListener, MouseMotionListener {
     public DraggableButton(String text) {
          super(text);
          addMouseListener(this);
          addMouseMotionListener(this);
     int oldX, oldY;
     public void mousePressed(MouseEvent ev) {
          oldX = ev.getX();
          oldY = ev.getY();
     public void mouseDragged(MouseEvent ev) {
          int dx = ev.getX() - oldX;
          int dy = ev.getY() - oldY;
          setLocation(getX() + dx, getY() + dy);
     public void mouseClicked(MouseEvent ev) {}
     public void mouseReleased(MouseEvent ev) {}
     public void mouseEntered(MouseEvent ev) {}
     public void mouseExited(MouseEvent ev) {}
     public void mouseMoved(MouseEvent ev) {}
     static void p(String s) {
          System.out.println(s);
}

Dragging and dropping components

Hi
I have created a component which extendsJButton, but is customised into various different shapes.
I want to be able to drag and drop this button. I have added mouselisteners and also mousemotionlisteners, but am at a loss as to how to actually move the component.
When I try to reset the setBounds vcoords using my MouseEvent data nothing is happening
Thanks in advance

Hi!
Here's a small program with a draggable Button.
Have a look at the class 'DraggableButton'.
Cheers Tom
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class DragButton extends JFrame {
     public DragButton()     {
          setDefaultCloseOperation(EXIT_ON_CLOSE);
          getContentPane().setLayout(null);
          DraggableButton b = new DraggableButton("Drag me");
          getContentPane().add(b);
          b.setBounds(30,30,100,30);
     public static void main(String args[]) {
          DragButton f = new DragButton();
          f.setBounds(200,200,400,400);
          f.setVisible(true);
class DraggableButton extends JButton implements MouseListener, MouseMotionListener {
     public DraggableButton(String text) {
          super(text);
          addMouseListener(this);
          addMouseMotionListener(this);
     int oldX, oldY;
     public void mousePressed(MouseEvent ev) {
          oldX = ev.getX();
          oldY = ev.getY();
     public void mouseDragged(MouseEvent ev) {
          int dx = ev.getX() - oldX;
          int dy = ev.getY() - oldY;
          setLocation(getX() + dx, getY() + dy);
     public void mouseClicked(MouseEvent ev) {}
     public void mouseReleased(MouseEvent ev) {}
     public void mouseEntered(MouseEvent ev) {}
     public void mouseExited(MouseEvent ev) {}
     public void mouseMoved(MouseEvent ev) {}
     static void p(String s) {
          System.out.println(s);
}

Setting drag and drop components using script

Hi,
Is there a way to set the drag object name and target name of
the Drag and Drop component using actionscript? I have looked
through the help files and there is no mention of how to do this. I
cannot find any methods relating to the Learning Interactions
either. Can this be done or am I trying to do something that Flash
is not capable of?
The reason I wish to do this is so I can retrofit the D&D
component into existing code. The existing code generates new
object/target pairs and stores them in an array. I need to be able
to read these values and plug them into the component at runtime.
Any ideas?
TIA
Colin

What about the product documentation ?
http://docs.oracle.com/cd/E23943_01/web.1111/b31973/af_dnd.htm#CIHCHGIF
Also, the following book:
has a chapter (chapter 14) on drag and drop
http://www.amazon.com/Oracle-Fusion-Developer-Guide-Applications/dp/0071622543/ref=sr_1_cc_1?s=aps&ie=UTF8&qid=1343975521&sr=1-1-catcorr&keywords=Oracle+Fusion+Developer+Guide
Frank

Drag And Drop Components IN Flex

hello all,
could we do code for drag components or controls like
boxes,slider,data grid,and related things from 1 canvas to another
canvas ?
I want to show all controls in left canvas and allow user to
drag it and drop in right canvas .
Thanks,
Bachi

"BachiSree" <[email protected]> wrote in
message
news:gc4j1a$m57$[email protected]..
> hello all,
> could we do code for drag components or controls like
boxes,slider,data
> grid,and related things from 1 canvas to another canvas
> I want to show all controls in left canvas and allow
user to drag it and
> drop
> in right canvas .
http://www.quilix.com/node/3

Drag and Drop between JTree and another component

Hi,
I have searched the forum for answer to this question but am not sure I found something similar to this. So, please help me out on this.
I have a JTree and a JPanel, which basically shows images (as thumbnails) for the child nodes of one node in the tree heirarchy.
I need to be able to drag and drop components from the JPanel to the JTree and vice versa, and of course, when you drop them on the tree, they should go under the correct node.
I am using Swing 1.4.1, and have successfully implemented DnD in the JTree itself. But I am a little unclear about the DnD between the tree and the panel.
Would really appreciate if someone could throw some light on this.
Thanks a lot,
Sri.

Hi clairesheridan,
thanks for your response. Your answer would have helped me if I was using JDK 1.3 but I am try to use the Swing API in jdk1.4.1, in which you have to set a transferhandler etc.
Please let me know if you have any ideas or solutions.
Thanks,
sriharmya.

Drag n drop components....

Could I get peoples opinions on a final year project idea please. I was thinking of a MIDP design prorgam for desktop where you drag and drop components(e.g. textfield)onto the screen and the program generates the MIDlet code from the design you made. Has this been done before? Would you find it useful?

Sorry that you are expecting an answer to decide your direction. Maybe the lack of a response is that (so far) no one needs or is looking for this type of a project. GUI builders tend to restrict developers rather than help in many cases and working with MIDP forms could be one of these cases.
I my self have developed my own (small) class library to help with the construction of MIDP applications and thus a GUI builder would not benefit myself. But If it helps you and others then go for it.
The KVM is a very small sub-set of Java developers and this forum is not that well visited to receive a represented sample of what KVM developers want or need.
Todd Blackley

Drag and Drop Funcionality

I would like to build a web page that supports drag-and-drop functionality ... e.g. drag an image from one area of the page to another. I have read that JSF supports drag-and-drop and was looking for ways to implement this functionality using Java Studio Creator. So far I have not found anything in the tutorials, and when I search in these forums for "drag and drop" I get lots of descriptions of dragging-and-dropping components onto a page (i.e. building a page) but not implementing drag-and-drop functionality itself. Any tips on where to find this information is appreaciated.

Thanks for the link about dragging and dropping Swing objects.
Now I am stuck, because it seems the only kind of ojbects that can be dragged-and-dropped are java.awt.Component obects. All the cool objects from the Creator Palette are not java.awt.Component objects so it appears I cannot implement drag-and-drop for those?
The below works okay, because btn is a java.awt.Component object.
Button btn = new java.awt.Button();
dragSource.createDefaultDragGestureRecognizer( btn,
DnDConstants.ACTION_MOVE, this);
But if instead of btn I try to use one of the objects from the Creator Palette (such as a Button which is of type com.sun.web.ui.component.Button) I get an error.
So then is there no way to implement drag-and-drop functionality with these cool new Creator GUI objects? Thanks.

Implementing drag and drop across components with drag image...

Hey all,
Finally got the hang of drag and drop. Not too hard, but a little time consuming. I found an article showing how to capture and drag a BufferedImage within a JTree. When you click and drag a node, it creates a BufferedImage of the node on screen and "ghosts" it a bit, which has a very appealing effect.
However, when I try to drag this image to a JList component, it disappears. So I created the same affect in the JList component. Now you can drag the image from the tree to the list and vice versa. However, the problem is, the image does not "fly over" the borders of the two components (butted up against each other) with the mouse. The image seems to go under the borders, while the mouse floats above everything.
What I would like to do is be able to drag the image all over the application, perhaps even the desktop in the case of a SDI application. I want to be able to see this image drag from my Java app over the Windows Explorer folder, just like how you can do that with Windows Explorer, dragging an image of the selected node into any app that supports the drop. I know we can handle the "transfer" data from explorer and vice versa, but how to be able to keep an image with the mouse?
My best guess is somehow using the Glass pane, grabbing a ref to its BufferedImage (if that is even what is there), and drawing the dragged item in that pane. But, then, how will the image move over the desktop outside of the app, where a glass pane is not?
Is there a way to draw on top of anything, anywhere, but still be able to redraw the background as the image moves with the mouse? There are times where the image may be big, so I don't want to have to capture the underlying screen as an image covering the size of the drag image to restore it as the drag image moves around.
Thank you.

We know cursors support some degree of transparence because they have shapes other than blocks.
I've done some playing around with
Toolkit.getDefaultToolkit().createCustomCursor(....);The sad news is, it seems that as soon as a pixel's alpha value is greater than 0, it automatically becomes 100% opaque.
The best you can do, is to take your image, and divide it into a pixel-checkerboard, and set the alpha value of alternating pixels to 0.
e.g.
BufferedImage i = new BufferedImage(32, 32, BufferedImage.TYPE_INT_ARGB);
        int[] data = ((DataBufferInt)i.getRaster().getDataBuffer()).getData();
        boolean on = true;
        for (int z=0; z<data.length; z++)
            if (on)
                data[z] = 0xffffffff;
            else
                data[z] = 0x00000000;
            on = !on;
            if (z%32==0) on = !on;
        Cursor hazyWhite = Toolkit.getDefaultToolkit().createCustomCursor(i, new Point(0,0), "hw");

ADF Button components: How to disable drag and drop [SOLVED]

Hi everyone
I need to develop an application which allows not the user to drag and drop button components. I've converted every single af:commandbutton to h:commandbutton, to prevent this behaviour, but a huge lot of other problems arose from this "solution". I'm using JDeveloper 10.1.3.3.0.4157, and I'm a beginner, so please be patient with me.
Thanks in advance.

Maybe I've drifted off-topic with this, but I found the way to achieve this. The only limitation is that the change must be done on the client's computer. The drag and drop feature can be disabled by going to the about:config page in Firefox, and setting nglayout.enable_drag_images to false. It can also be done in a more "portable" way by creating a user.js script in the profile folder and setting it from there. Thank you all for stopping by and reading.

Drag and Drop using Components[

Hi,
As anyone used Drag and Drop for components? I mean, allowing the user to drag and drop a component around a container? Just curious, so far from what I've seen, the only things that can be dragged/dropped are properties of a given object, such as 'text" from a JLabel.
thanks

IMHO, you don't need fancy drag and drop features to do that. Implementing MouseInputListener and listening for mouseDragged is a good start. Then setting the component's bounds depending on the location of the mouse at the mouseReleased event (wrt the starting offset) could be a good idea (if you're using absolute positioning, of course).
From there, it all depends on what you want it to look like during the "transfer". You could, for instance paint the component in a BufferedImage at the start of the D&D and then paint the image with transparency as the mouse is moving.
Camickr had an interesting post that might help you :
http://forum.java.sun.com/thread.jspa?forumID=57&threadID=492100

Programatic Generation and positioning of components using Drag and Drop

Hi,
I am relatively new to ADF and UI Designing. Im trying to generate a flowchart using drag and drop feature in ADF. This involves creation of dragging images such as start,decision .. etc from one panel to another and dynamically creating a flowchart.
Up to now i have managed to drag images from panel1 to panel2 and create them dynamically in the bean class. However im stuck at this point .. Im not able to position the draggable components on the desired position in the panelGroup. They either appear horizontally or vertically.
Is there any way to achieve this. Also is it possible to assign a dropTarget to a a target component which is created dynamically ?
Thanks in anticipation ....
Lyle

Hi Lyle,
I am too only 4 months old to adf ,i use jdeveloper 10g.
In 10g for the components to be placed at desired locations i think is somewhat possible. While you can arrange them by using spaces which causes
f:verbatim tag to appear or you can use ADF Faces Core items like Object Spacer and Object Seperator where you can set their length and width to space objects on page...
Regards
Rohit

How can I learn "Drag and Drop" with Swing components?

Hello,
Im using swing components, so using paint() to draw a "drag icon" doesnt seem acceptable. Im basically trying to move a JPanel image to be dragged/dropped over another JPanel in the same program/applet.
I looked at Sun's Java Tutorial for information on doing drag and drop, but there was no trail completed yet.
Does anyone know of any good resources to learn? Or can at least give me a general idea of how to do drag and drop?

Did you see this?
http://java.sun.com/docs/books/tutorial/dnd/index.html
http://java.sun.com/docs/books/tutorial/reallybigindex.html

How can we restrict the type of components that can be dragged and dropped from the sidekick CQ

how can we restrict the type of components that can be dragged and dropped from the sidekick CQ

Generally drop the components at parasys. The components allowed on the parsys is control via the design mode of the page.So restrict components at the design of the parsys. http://dev.day.com/docs/en/cq/current/wcm/working_with_cq_wcm/using_edit_designandpreviewm odes.html#Design%20Mode

Drag and Drop in custom components..

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>

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

Drag and drop components

Similar Messages

Maybe you are looking for