Button in draggable MC

Hey everyone,
I'm working on a project where I have cards that need to be moved around and flipped. The cards themselves are on individual movie clips. I originally intended for a double-click to flip the card, and a click-and-drag to movem them around. That just wouldn't work; for some reason the double click wouldn't work even thogh I had doubleClickEnabled set to true. So what I'm currently trying is to have a button that flips the cards within the card movie clip; however that is also not working. Somehow, the button stays in place instead of being moved with the rest of the MC.
Unfortunately I'm not on a computer with Flash, so I can't post the code, but I'll do that tomorrow. For now, does anyone have any suggestions?
Thank you!

Thanks! That did work.
I was hoping you might be able to help me with my previous attempt, where click-and-drag moves the card and double-clicking flips it. I would prefer to use this method over the flip button if possibel. Here's the code I was using:
TVmc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
TVmc.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
TVmc.addEventListener(MouseEvent.DOUBLE_CLICK, flipCard);
TVmc.doubleClickEnabled = true;
function flipCard(myEvent:MouseEvent):void {
     TVmc.gotoAndPlay(currentFrame+1);
function startDragging(myEvent:MouseEvent):void {
     myEvent.currentTarget.startDrag();
function stopDragging(myEvent:MouseEvent):void {
     myEvent.currentTarget.stopDrag();
The flipping animation is within TVmc. Each of the two states in TVmc (face up and face down) has a variation of the following code, changing only the movie clip instance name and the finction name:
stop();
TVfront.addEventListener(MouseEvent.DOUBLE_CLICK, flipFront)
TVfront.doubleClickEnabled = true;
function flipFront (myEvent:MouseEvent): void {
          gotoAndPlay(currentFrame+1); }
The code half-works. If the card is face up, it flips properly; however, if it is face down, the animation plays from the beginning (ie. from the face up state instead of from the current face down state).

Similar Messages

  • Problems with button inside draggable movie clip

    I am building a click through presentation that has some small text in it. To maintain the design and allow for readability, I have added a zoom feature.
    Here is the structure of the movie,
    Stage - contains pages movie clip and forward/reverse click buttons for changing pages
         pages_mc - contains 24 frames, one page per frame and buttons
    There is a button at the _root level that uses a tweener to scale the pages_mc up to 170%. When this is clicked, it allows the pages to be dragged around the screen so you can look at different sections. When you click the button again, it returns the pages back to their original size stops drag.
    My problem is, on the pages, there are buttons with links to external sites. Once startDrag has been invoked, I cannot touch the buttons inside the movie clip. Is there a way to make these buttons work?
    I need the finished quickly so any assistance is welcome.
    Code below
    magUp_btn.onRelease = function() {
    this._visible = false;
    TweenLite.to(pages_mc, .25, {_x:-250, _y:-193, _xscale:170, _yscale:170});
    TweenLite.to(magUp_mc, .75, {_alpha:0});
    TweenLite.to(magDown_mc, .75, {_alpha:25});
    magDown_btn._visible = true;
    pages_mc.onPress = function(){
    this.startDrag();
    pages_mc.onRelease = function(){
    this.stopDrag();
    pages_mc.onReleaseOutside = function(){
    this.stopDrag();
    pages_mc.useHandCursor = false;
    TweenLite.to(instr_mc, 1, {_alpha:100});
    magDown_btn.onRelease = function() {
    TweenLite.to(pages_mc, .25, {_x:0, _y:0, _xscale:100, _yscale:100});
    TweenLite.to(magUp_mc, .75, {_alpha:25});
    TweenLite.to(magDown_mc, .75, {_alpha:0});
    this._visible = false;
    magUp_btn._visible = true;
    pages_mc.onPress = function(){
    this.stopDrag();
    TweenLite.to(instr_mc, 1, {_alpha:0});
    I don't know how to turn drag off when I zoom out without using the onPress command, but I know that this is probably what is getting in the way of the button working?
    Thanks!

    One option is to make the background of the pages be the draggable parts rather than the movieclips that contain the pages and buttons.  That way, the buttons could be atop the background and not have their access blocked.
    Instead of coding the pages_mc, you would essentially have the background coded for the drag...
    pages_mc.bkgnd.onPress = function(){
        startDrag(this._parent);

  • How to find right selector of my selected element

    Hi, see the 60th line. i want to get that record.
    how can i use selector to get that element value (28). i am using jtable and that element was displaying as a second level child.
    Thanks
    Venkat
    <pre><nowiki><div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-1" aria-labelledby="ui-id-2">uiDraggable=Object { element={...}, uuid=4, eventNamespace=".draggable4", more...}uiResizable=Object { element={...}, uuid=5, eventNamespace=".resizable5", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-3" aria-labelledby="ui-id-4">uiDraggable=Object { element={...}, uuid=10, eventNamespace=".draggable10", more...}uiResizable=Object { element={...}, uuid=11, eventNamespace=".resizable11", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-5" aria-labelledby="ui-id-6">uiDraggable=Object { element={...}, uuid=16, eventNamespace=".draggable16", more...}uiResizable=Object { element={...}, uuid=17, eventNamespace=".resizable17", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-7" aria-labelledby="ui-id-8">uiDraggable=Object { element={...}, uuid=22, eventNamespace=".draggable22", more...}uiResizable=Object { element={...}, uuid=23, eventNamespace=".resizable23", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-9" aria-labelledby="ui-id-10">uiDraggable=Object { element={...}, uuid=28, eventNamespace=".draggable28", more...}uiResizable=Object { element={...}, uuid=29, eventNamespace=".resizable29", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-11" aria-labelledby="ui-id-12">uiDraggable=Object { element={...}, uuid=34, eventNamespace=".draggable34", more...}uiResizable=Object { element={...}, uuid=35, eventNamespace=".resizable35", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-13" aria-labelledby="ui-id-14">uiDraggable=Object { element={...}, uuid=40, eventNamespace=".draggable40", more...}uiResizable=Object { element={...}, uuid=41, eventNamespace=".resizable41", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-15" aria-labelledby="ui-id-16">uiDraggable=Object { element={...}, uuid=46, eventNamespace=".draggable46", more...}uiResizable=Object { element={...}, uuid=47, eventNamespace=".resizable47", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" style="display: none;" tabindex="-1" role="dialog" aria-describedby="dialog-confirm" aria-labelledby="ui-id-17">uiDraggable=Object { element={...}, uuid=52, eventNamespace=".draggable52", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front dlg-no-close ui-draggable" style="height: auto; width: 750px; top: 378px; left: 296px; display: none;" tabindex="-1" role="dialog" aria-describedby="dialog-comp" aria-labelledby="ui-id-18">uiDraggable=Object { element={...}, uuid=55, eventNamespace=".draggable55", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-19" aria-labelledby="ui-id-20">uiDraggable=Object { element={...}, uuid=60, eventNamespace=".draggable60", more...}uiResizable=Object { element={...}, uuid=61, eventNamespace=".resizable61", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-21" aria-labelledby="ui-id-22">uiDraggable=Object { element={...}, uuid=66, eventNamespace=".draggable66", more...}uiResizable=Object { element={...}, uuid=67, eventNamespace=".resizable67", more...}
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="display: none; position: absolute;" tabindex="-1" role="dialog" aria-describedby="ui-id-23" aria-labelledby="ui-id-24">uiDraggable=Object { element={...}, uuid=72, eventNamespace=".draggable72", more...}uiResizable=Object { element={...}, uuid=73, eventNamespace=".resizable73", more...}
    <div class="ui-widget-overlay ui-front"></div>
    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable" style="height: auto; width: 750px; top: 610px; left: 296px; display: block;" tabindex="-1" role="dialog" aria-describedby="dialog-orgs" aria-labelledby="ui-id-25">uiDraggable=Object { element={...}, uuid=76, eventNamespace=".draggable76", more...}
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <div id="dialog-orgs" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 551px;">uiDialog=Object { element={...}, uuid=74, eventNamespace=".dialog74", more...}
    <fieldset>
    <fieldset>
    <legend>
    <div id="OrganizationTableContainer">hikJtable=Object { element={...}, uuid=24, eventNamespace=".jtable24", more...}
    <div class="jtable-main-container">
    <div class="jtable-busy-panel-background" style="display: none; width: 703px; height: 87px;"></div>
    <div class="jtable-busy-message" style="display: none;"></div>
    <div class="jtable-title">
    <table class="jtable">
    <thead>
    <tbody>
    <tr class="jtable-data-row jtable-row-even" data-record-key="5">record=Object { SiteCode="ACS", SiteID=5, OrgName="American Cancer Society"}childRow=jQuery(tr.jtable-child-row)
    <tr class="jtable-child-row" style="display: none;">
    <tr class="jtable-data-row jtable-row-selected" data-record-key="6">record=Object { SiteCode="UNKNOWN", SiteID=6, OrgName="American Red Cross"}childRow=jQuery(tr.jtable-child-row)
    <tr class="jtable-child-row" style="display: table-row;">
    <td colspan="5">childTable=jQuery(div.jtable-child-table-container✉)
    <div class="jtable-child-table-container" style="display: block;">hikJtable=Object { element={...}, uuid=77, eventNamespace=".jtable77", more...}
    <div class="jtable-main-container">
    <div class="jtable-busy-panel-background" style="display: none; width: 697px; height: 87px;"></div>
    <div class="jtable-busy-message" style="display: none;"></div>
    <div class="jtable-title">
    <table class="jtable">
    <thead>
    <tbody>
    <tr class="jtable-data-row jtable-row-even jtable-row-selected">record=Object { BranchID=24, Name="Metro Atlanta Chapter", SiteID=6}childRow=jQuery(tr.jtable-child-row)
    <tr class="jtable-child-row" style="display: table-row;">
    <td colspan="8">childTable=jQuery(div.jtable-child-table-container✉)
    <div class="jtable-child-table-container" style="display: block;">hikJtable=Object { element={...}, uuid=101, eventNamespace=".jtable101", more...}
    <div class="jtable-main-container">
    <div class="jtable-busy-panel-background" style="display: none; width: 691px; height: 87px;"></div>
    <div class="jtable-busy-message" style="display: none;"></div>
    <div class="jtable-title">
    <table class="jtable">
    <thead>
    <tbody>
    <tr class="jtable-data-row jtable-row-even" data-record-key="28">record=Object { ZipCode=30324, CountryCode="USA", PhoneNumber="404-876-3302", more...}
    <td class="jtable-selecting-column">
    <td>28</td>
    <td>1955 Monroe Dr. NE</td>
    <td>Atlanta</td>
    <td>30324</td>
    <td>404-876-3302</td>
    </tr>
    </tbody>
    </table>
    <div class="jtable-column-resize-bar" style="display: none;"></div>
    <div class="jtable-column-selection-container"></div>
    </div>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <div class="jtable-column-resize-bar" style="display: none;"></div>
    <div class="jtable-column-selection-container"></div>
    </div>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <div class="jtable-column-resize-bar" style="display: none;"></div>
    <div class="jtable-column-selection-container"></div>
    </div>
    </div>
    </fieldset>
    <input id="Done" class="submit-org" type="submit" value="Submit">
    </div>
    </div>
    </body>
    </html></nowiki></pre>

    As you can see, this forum doesn't cope very well with HTML...
    Can you post the code on a site such as [http://pastebin.com/] and then edit your post to switch in the URL for the HTML? Then your reference to a line number will make a lot more sense.
    Alternately, since this forum focuses on end-user support, you might get more focused assistance on the unofficial [http://forums.mozillazine.org/viewforum.php?f=25 mozillaZine Web Development board]. It's a separate site with separate registration. ''And'' it support BBCode [code] tags.

  • How to draw make the overlapped images on a JToggle Button draggable

    Hello all:
    I have a JPanel chart set with GridBagLayout. Each cell is a JButton,
    I've create several overlaping images (from my existing images) using JLayeredPane
    and adding on one particular cell JToggleButton. The images are displayed, but I don't know
    how to make it draggable for users to drag to another cell within GridbagLayout.
    I have been stuck on this for a long time, I'd appreciate if anyone give me some help
    on this.

    Hi kglad -
    Thanks. That worked perfectly.
    Surely you jest with me.  Since I couldn't script a play button where in my brain do you think I would I find the cells to "use listeners for the video playing/stopping to control bigPlay_btn's _visible property".
    That's okay.  I'm sure after answering almost 50,000 questions it's easy to forget who you're talking to.
    Thanks again.
    Josh

  • Draggable buttons

    Hello,
    currently I'm working on a draggable movieclip and in it I
    have a button that is supposed to open a new window. The movieclip
    is tweended and follows a path (circles). The button moves along
    with the movieclip because it is contained in a graphic.
    The button is part of the graphic that is in the movieclip so
    basicly this is the way it is build up:
    movieclip (draggable) / graphic / button (should be clickable
    but it doesn't work)
    So far I got this script (which works on the movieclip) but
    as you can understand I want the last part to work only on the
    button.
    quote:
    on(press) {
    startDrag(this);
    on(release) {
    stopDrag();
    on (release) {
    getURL ("javascript:
    openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
    I'm using Flash MX 2004.
    Thanks for your help.

    iConvict,
    > movieclip (draggable) / graphic / button (should be
    clickable
    > but it doesn't work)
    Draggable buttons are something of a problem. You have a
    button inside
    a movie clip, and the movie clip has dragging capabilities.
    That means the
    movie clip is already "listening" for mouse events, and since
    the movie clip
    is your outermost object, it obscures objects inside it that
    also listen for
    mouse events. Make sense?
    > So far I got this script (which works on the movieclip)
    but as
    > you can understand I want the last part to work only on
    the
    > button.
    >
    > on(press) {
    > startDrag(this);
    > }
    Okay, so this part (above) is on your movie clip.
    > on (release) {
    > getURL ("javascript:
    >
    openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
    > }
    And this part (above) is also on your movie clip. Which
    means you
    you're not handling the button's events at all. Just about
    everything in
    ActionScript is an object, and objects are defined by their
    namesake
    classes. You can look up the Button class, for example, and
    find out all
    the properties, methods, and events of a button symbol. Same
    for the
    MovieClip class, TextField class, and so on. Properties are
    characteristics
    the object has, methods are things the object can do, and
    events are things
    the object can react to.
    But even if you properly wrote instructions for the button's
    events
    (versus the movie clip's events), the movie clip's existing
    mouse event
    handlers would "obscure" those of the button.
    So one approach -- there are, perhaps, others -- is to use
    the
    MovieClip.hitTest() method to determine if the button is
    "hitting" a
    particular point, then handling that -- all from the movie
    clip's point of
    view. In order to use MovieClip.hitTest(), that button will
    have to be a
    movie clip, since the Button class does not feature a
    hitTest() method.
    NOTE: I'm using a different approach from the on() event
    handler. on()
    and onClipEvent() still work, of course, but they represent
    the way things
    were done back in Flash 5. Since Flash MX (aka Flash 6), it's
    been possible
    to assign event handlers using dot syntax. I prefer that way
    because it
    means I can put all my ActionScript in one place (a frame of
    the main
    timeline) rather than dispursed among various symbols.
    So ... that said, here's what you need in order to test my
    suggestion.
    Start a new FLA -- this just keeps things clean -- and draw a
    rectangle.
    Convert that to a movie clip. Inside that movie clip, draw a
    circle and
    convert that to a movie clip, too. This inner circle movie
    clip is going to
    be your "button". Select it and look at the Property
    inspector. You'll see
    where you can give this "button" an instance name. Instance
    names are
    different from the names you give something in the Library.
    These are
    unique identifiers to a given instance of your object on the
    Stage. For
    now, name this thing mcButton. Step out of the timeline
    you're in (the
    outer movie clip's timeline) in order to be able to give the
    outer movie
    clip an instance name, too. For now, name the outer clip
    mcClip.
    Now, the code.
    mcClip.onPress = function() {
    if (!this.mcButton.hitTest(_root._xmouse, _root._ymouse,
    true)) {
    this.startDrag();
    mcClip.onRelease = function() {
    this.stopDrag();
    if (this.mcButton.hitTest(_root._xmouse, _root._ymouse,
    true)) {
    trace("button click");
    So, what's going on, here? According to the MovieClip class,
    all movie
    clips feature a MovieClip.onPress event. We're assigning a
    function to this
    event and instructing the outer clip to start dragging (the
    MovieClip.startDrag() method) if the mouse position is NOT
    colliding with
    the inner "button" clip.
    MovieClip.hitTest() can be used two ways: a) am I colliding
    with
    another clip? OR b) am I colliding with a certain point?
    We're using the
    second way here. The exclamation point at the beginning makes
    this a
    negation ... a NOT question. Hold that thought. Next, the
    global "this"
    property refers back to whatever timeline or object we're in.
    Since we're
    scoped to a function that is assigned to the onPress event of
    mcClip, the
    word "this" refers to mcClip in this context. Therefore,
    this.mcButton
    refers to the mcButton instance inside of mcClip. Our path,
    then
    (this.mcButton), leads us to the "button" clip, which is a
    MovieClip
    instance. Since it is, it has the MovieClip.hitTest() method
    available to
    it. In the "second way" to use hitTest(), we supply three
    parameters: a)
    the mouse's horizontal position from the point of view of the
    main
    timeline -- this is the MovieClip._xmouse property -- b) the
    mouse's
    vertical position from the same POV, and c) a "true" value
    that indicates
    yes, we want to recognize the button's round shape, rather
    than the
    rectangle described by its bounding box.
    When the mouse -- from the POV of the main timeline -- is
    indeed inside
    the boundaries of the mcButton clip, hitTest() will return
    true. Since
    we're negating that with out exclamation point, we're
    actually looking for
    cases where the mouse is NOT within the boundaries of the
    mcButton clip.
    That's what our if() statement checks for. When the mouse is
    NOT within
    mcButton, start dragging. This means that clicking inside the
    outer
    rectangle clip will allow dragging, but only when the
    clicking is done
    outside the button itself.
    Next, when the user stops clicking -- the
    MovieClip.onRelease event --
    the clip should stop dragging, in all cases. Then, using the
    same logic as
    above, another if() statement checks of the mouse happens to
    be inside the
    boundaries of the inner clip. If it is -- because we're not
    negating,
    here -- then do something.
    The above code should go in a keyframe of the main timeline,
    where, from
    that point of view, the mcClip object (identified by its
    instance name) is
    "visible."
    This *can* be done using on(), so think through the
    principles involved
    and do it that way, if you prefer. If you use on(), you don't
    need an
    instance name for the outer clip, because your code is
    directly attached
    *to* that clip, so the indended recipient of your
    instructions is clear.
    But you will need an instance name for the inner clip in
    order to reference
    it from the outer one.
    David
    stiller (at) quip (dot) net
    Dev essays:
    http://www.quip.net/blog/
    "Luck is the residue of good design."

  • How to make a button in a draggable element?

    I set an image to be a draggable element. ( this means the
    cursor becomes a hand obviously ). What I want is to make one
    portion of this graphic a button so the user drags the image into
    view and then clicks on the area of the graphic that has a button
    to navigate to another scene.
    The problem is, when i create a button and place it in the
    movie ( image ), it doesnt recognize it as a clickable button.
    Essentailly its a web page that scrolls as the draggable
    element and at the bottom of the page has buttons. I dont know how
    to put them in this. :(

    you could add a button on top of the portion of the image and
    just have a hit area of that button, no over, down or up states.
    That should work for you.

  • Draggable button

    I have a moviclip with a button inside of it, and I want the
    movie clip to be draggable. The button I have inside works fine,
    but as soon as I add the startdrag action to the movie clip the
    button stops working. I'm trying to build an OS style interface
    similar to link I provided below. Can some one help me learn how to
    go about this?
    (click skip to skip video)
    http://www.hp.com/personalagain/us/en/shaun_white.html

    Here is the code I have been using if it can be any help at
    all.
    Am I looking at a pretty extensive actionscript to accomplish
    what I am looking to do?
    Appreciate any help offered. Thanks Again.
    //DOUBLE CLICK TO SHOW CONTENT
    //set initial variables
    click = false;
    //function for the button press
    button_btn.onPress = function() {
    //if this is the first click
    if (!click) {
    timer = getTimer()/1000;
    _root.click = true;
    else {
    timer2 = getTimer()/1000;
    //if it is a double click
    if ((timer2-timer)<.25) {
    //toggle the box mc on and off
    if (_root.box_mc._visible==false) {
    _root.box_mc._visible = true;
    } else {
    _root.box_mc._visible = false;
    } else {
    timer = getTimer()/1000;
    _root.click = true;
    //DRAGGING CONTENT
    //border variables
    left = 0;
    top = 0;
    right = Stage.width;
    bottom = Stage.height;
    //drag the mask
    _root.box_mc.onPress = function() {
    startDrag(this);
    _root.box_mc.onRelease = function() {
    stopDrag();
    stop();

  • Draggable buttons in Java Swing

    Hi,
    I want to develop an application in Java Swing. The application I am going to develop is an application for developing other applications. I want my application to include a button which also acts as a drag and drop UI element. For example, I want my application to include a button for adding a picture. There are 4 buttons of different pictures. If a user wants to add a picture he can either click on one of these buttons and that picture will be added somewhere on the screen or dragging this button and drop it and that picture will be added where he dropped that button.
    Could anyone please tell me…
    1. If I can develop an application which includes Drag and Drop UI element if I develop it in Java Swing
    2. If a button (or other UI element) can act as both a button and a drag and drop element if I develop my application in Java Swing
    3.
    Could you please tell me where I can find some screenshots of applications which has been developed in Java Swing? I am not familiar with this program and I am not that good at programming, so I would like to get some impression of how it might look like.
    Thanks in advanced

    1. the good thing about Swing is that it is very flexible and with clever programming you can do just about anything. The problem is that depending on your requirements, this could require a great deal of programming that can be very hard to implement such that it works properly on all popular platforms (windows, linux, mac).
    2. see 1.
    3. Swing applications are "skinnable", you can give them a great number of different appearances. The default is to give the application a system look and feel, so they look pretty much like any other application for that platform. This means that when you run your application on Windows, it will look like a Windows application, if you run it on a Mac it will look like a Mac application, etc.
    I am not familiar with this program and I am not that good at programmingThat is quite a problem, because Swing is not the easiest API around. It requires a solid knowledge of Java and Object Oriented Programming in general as the entire API is based heavily on OOP concepts. To get a better idea of Swing, read through the Swing tutorial here:
    http://java.sun.com/docs/books/tutorial/uiswing/

  • Movie clip draggable button

    Here is the code I have so far. it has been driving me nuts
    in my attempt to make my homepage the problem is it will not read
    the gotoAndPlay command to take the overall movie to frame 5 and
    then stop. seems easy and not overwelming but no matter what i do
    it does not work.
    here is the code please help.
    //about button commands
    var mcAbout:MovieClip;
    mcAbout.onPress = function(){
    startDrag("mcAbout");
    mcAbout.onRelease = function(){
    stopDrag();
    var mcAbout:MovieClip
    mcAbout.onRollOver = function(){
    mcAbout.gotoAndPlay("rollover");
    mcAbout.onRollOut = function(){
    mcAbout.gotoAndPlay("rollout");
    mcAbout.onMouseDown= function(){
    mcAbout.gotoAndPlay(5);
    }

    there, at least, two problems. first, there's a logic issue.
    if you want to start dragging your button with one click
    you'll need some way to stop dragging it and you can't use the
    onRelease handler because it may execute BEFORE the single click
    code executes.
    to understand this you must understand something about any
    and all techniques to detect and differentiate between a single and
    double click. by necessity, for a single click to be detected by a
    button that must check for a double click, some period of time must
    elapse before the button can conclude that it's been clicked once.
    it can't execute it's single click code during that time or it may
    execute that code and then find a 2nd click has arrived in time to
    qualify as a double click and you wouldn't want your button to
    execute its single and double click codes.
    therefore, if a user clicks and releases your button in
    normal rapid succession your button will execute its stopDrag()
    before its startDrag() resulting in your button being dragged.
    so, for a button that you want to sometimes drag and
    sometimes have execute other code, you should not use a single and
    double click technique. you should use one that detects a press and
    hold (startDrag) versus a press and release (execute single click
    code).
    and the second error, you misspelled mcAbout in clickF():

  • How to fix the Draggable element at its new location after every drag

    Hi All,
    I was trying something new with implementing the "Drag & Drop" control in UI5 .
    The whole functionality involved putting all the items in the list and ,making them draggable.
    After the user drags and drops the item to a new location , it becomes fixed at the position , until its dragged again.
    This is the following piece of code that i was working on :
    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
      $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
      $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
      $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
      $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');
      $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-droppable');
      var backlog = ["As a site visitor, I can read FAQs","As a site editor, I can maintain an FAQ section","As a site member, I can download the latest training material and methodology PDFs","As a visitor, I can download presentations, PDFs, etc. on Scrum that I can use"];
      backlog.sort();
      jQuery.sap.require("jquery.sap.strings"); //Load the plugin to use 'jQuery.sap.startsWithIgnoreCase'
    var oAdd_backlog = new sap.ui.commons.Button({text:"Add Backlog Item", tooltip:"Submit value",width:"160px"});
           var oHorizontal_Layout = new sap.ui.layout.HorizontalLayout("Layout1", {
            content: [oSearch, oAdd_backlog, oBacklog_status_filter ]
      //vertical layout
        // create a list box to show the backlog items
      //backlog list
      var backlog_list = new sap.ui.commons.ListBox("list1", {visibleItems:100, width : "60%"});
      // initialize the list
      updated_baklog_List(backlog_list);
      backlog_list.addStyleClass("list_css1");
    //drag and drop functionality
      var oOldOnAfterRender = backlog_list.onAfterRendering;
      backlog_list.onAfterRendering = function() {
      oOldOnAfterRender.apply(this);
      var $listBoxId = this.getId();
      $("#"+$listBoxId+"-list").sortable();
      //final layout
      var oVerticalLayout = new sap.ui.layout.VerticalLayout("Layout2", {
      content: [oHorizontal_Layout, backlog_list]
    Your inputs and new approaches are valuable to my research .

    You shouldn't have to do anything.
    Holdend is default and it ought to keep the value.
    I guess something else is happening which interferes.
    Are you stopping the animation?
    Starting another one ( which will effectively stop the first )?
    Or something.
    I did a very quick and dirty test changing a colour:
    <UserControl.Resources>
    <Storyboard x:Name="sb">
    <ColorAnimation
    Storyboard.TargetName="Button1BackgroundBrush"
    Storyboard.TargetProperty="Color"
    From="Red" To="Yellow" Duration="0:0:5"
    FillBehavior="HoldEnd"
    />
    </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
    <Button
    Content="This is a button">
    <Button.Background>
    <SolidColorBrush x:Name="Button1BackgroundBrush" Color="Red" />
    </Button.Background>
    </Button>
    </Grid>
    </UserControl>
    Code behind
    public MainPage()
    InitializeComponent();
    this.sb.Begin();
    It stays yellow.
    Hope that helps.
    Recent Technet articles:
    Property List Editing   ;  
    Dynamic XAML

  • Need Help, how to create more than one rectangle from one button in one stage of canvas

    Dear Guys,
    I has problem to create more than one rectangle canvas from one button. here my role to create :
    1. I create input size with textfield
    2. I click button called "submit query"
    3. My web will create a rectangle with specific size.
    My problem come when I click again the button, my old rectangle has been remove than my new rectangle has created.
    My question is : how I can create more than one without delete/remove the old I was created?
    Here my Code :
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" media="all" href="css/style.css"><script src="kinetic-v4.7.2.min.js"></script></head> <body><label>Length</label><input name="panjang" id="panjang" type="text" size="5" maxlength="5"><br> <label>Width</label><input name="lebar" id="lebar" type="text" size="5" maxlength="5"><br>  <label>Height</label><input name="tinggi" id="tinggi" type="text" size="5" maxlength="5"><br> <label>Packing Name</label><input name="nam_pac" id="nam_pac" type="text" size="5" maxlength="5"><br> <input name="submit" type="submit"> <script defer>              var stage = new Kinetic.Stage({                container: 'container',                width: 943.5,                height: 254.10              });              var layer = new Kinetic.Layer();              var rectX = stage.getWidth() / 2 - 50;              var rectY = stage.getHeight() / 2 - 50;                            var group = new Kinetic.Group({                draggable: true              });                                         var box = new Kinetic.Rect({                x: rectX,                y: rectY,                width: <?php echo ($_POST['panjang']/10)/1.3; ?>,                height: <?php echo $_POST['lebar']/10; ?>,                //fill: '#00D2FF',                stroke: 'blue',                strokeWidth: 2                //draggable: true              });               var simpleText = new Kinetic.Text({                x: Math.round(box.getWidth() / 2),                y: Math.round(box.getHeight() / 2),                text: '<?php echo $_POST['tinggi'].'/'.$_POST['nam_pac']; ?>',                fontSize: 30,                fontFamily: 'Calibri',                fill: 'blue',              });                                          // add cursor styling              box.on('mouseover', function() {                document.body.style.cursor = 'pointer';              });              box.on('mouseout', function() {                document.body.style.cursor = 'default';              });                            group.add(box);              group.add(simpleText);              layer.add(group);              stage.add(layer);            </script></body> 
    this is my printscreen may help you to help me :
    thanks before to help me
    Regards,
    Prabowo.

    It's work Ken, but if I modify your code into my code.
    error again. they say like before (...is undefined)
    May You want to check my code
    <?php
    include('pinambung.php');
    ?>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>GI Loading Plan Maker</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" type="text/css" media="all" href="css/style_2.css">
    <script src="js/kinetic-v4.7.2.min.js"></script>
    <script src="js/CalendarPopup.js"></script>
    <script src="js/jquery-1.10.2.js"></script>
    </head>
    <body>
      <header class="w" id="header"> <!--Header Area -->
          <img src="images/headers.jpg" width="100%" height="100%" />
      </header><!--End of Header Area -->
      <nav class="w" id="nav"><!--nav Area -->
          <?php include('top.php'); ?>
      </nav><!--End of nav Area -->
      <section class="w" id="main"><!--section Area -->
          <section id="content">
          <article>
            <h2>Customer Info</h2>
            <form id="myForm" action="insert.php" method="post">
            <label>Customer Name :</label><input name="cs_name" id="cs_name" type="text" size="25" maxlength="50">
            <br>
            <label>Date of Shipment :</label><input name="shipment_date" id="shipment_date" type="text" size="10" maxlength="12" > use format : YYYY-MM-DD
            <br />
            <label>Container Name :</label><input name="con_num" id="con_num" type="text" size="10" maxlength="12">
            <label>Revision :</label><input name="revision" id="revision" type="text" size="5" maxlength="5"><br />
            <label>Prepared by :</label><input name="prepared_by" id="prepared_by" type="text" size="25" maxlength="50">
            <button id="saveinfo">Save As DB</button>
            <button id="saveall">Save As Image</button>
            <button id="print" onclick="window.print();return false">Print</button>
            </form>
            <span id="result"></span>
            <script type="text/javascript" src="js/insert.js"></script>
          </article>
              <br /><br />
          <article>
              <h2>Packing Info</h2>
            <label>Container Type :</label>
            40' HC<input name="con_type" type="radio" id="con_type" value="40hc">
            40'<input name="con_type" type="radio" id="con_type" value="40">
            20<input name="con_type" type="radio" id="con_type" value="20"><br />
            <input name="loadstan" type="button" value="Create Container" id="isSelect">
            <button id="removecon">Remove Container</button>
            <br />
            <label>Length</label><input name="panjang" id="panjang" type="text" size="5" maxlength="5">
            <label>Width</label><input name="lebar" id="lebar" type="text" size="5" maxlength="5">
            <label>Height</label><input name="tinggi" id="tinggi" type="text" size="5" maxlength="5">
            <label>Packing Name</label><input name="nam_pac" id="nam_pac" type="text" size="20" maxlength="55">
            <input name="loadstan" id="loadstan" type="button" value="Load Standard Packing" onclick="window.open('spk.php', 'winpopup', 'toolbar=no,statusbar=no,menubar=no,resizable=yes,scrollbars=yes,width=300,height=400');">
            <input name="submit" type="submit" value="Create Box">
            <button id="remove">Remove Box</button><br />
          </article>
        </section>
        <aside id="sidebar">
          <label for="layer-to-delate">Select a layer to delete or rotate</label><br />
          <select id="layer-to-delete" size="14"></select><br />
          <input id="delete-layer-button" type="button" value="Delete layer">
          <input id="rotate-layer-button" type="button" value="Rotate box">
        </aside>
        <section id="content2">
          <div id="container">
          </div>
          <script defer>
          function radians (degrees) {return degrees * (Math.PI/180)}
          function degrees (radians) {return radians * (180/Math.PI)}
          function angle (cx, cy, px, py) {var x = cx - px; var y = cy - py; return Math.atan2 (-y, -x)}
          function distance (p1x, p1y, p2x, p2y) {return Math.sqrt (Math.pow ((p2x - p1x), 2) + Math.pow ((p2y - p1y), 2))}
            var stage = new Kinetic.Stage({
                container: 'container',
                width: 943.5,
                height: 254.10
            var layers = new Array();
           function addCont(){
               layer2 = new Kinetic.Layer();
                switch ($('input:radio[name=con_type]:checked').val()){
                  case '40hc':
                     var box_con = new Kinetic.Rect({
                          x: 10,
                          y: 10,
                          width: 1190/1.3,
                          height: 2300/10,
                          stroke: 'black',
                          strokeWidth: 2
                      var TextCon = new Kinetic.Text({
                          x: 10,
                          y: 240,
                          text: 'Container Size 40 HC (11900mm X 2300mm X 2550mm)',
                          fontSize: 12,
                          fontFamily: 'Calibri',
                          fill: 'green',
                      layer2.add(box_con);
                      layer2.add(TextCon);
                      stage.add(layer2);
                      break;
                     case '40':
                     var box_con = new Kinetic.Rect({
                          x: 10,
                          y: 10,
                          width: 1190/1.3,
                          height: 2300/10,
                          stroke: 'black',
                          strokeWidth: 2
                      var TextCon = new Kinetic.Text({
                          x: 10,
                          y: 240,
                          text: 'Container Size 40 (11900mm X 2300mm X 2250mm)',
                          fontSize: 12,
                          fontFamily: 'Calibri',
                          fill: 'green',
                      layer2.add(box_con);
                      layer2.add(TextCon);
                      stage.add(layer2);
                      break;
                     case '20':
                     var box_con = new Kinetic.Rect({
                          x: 10,
                          y: 10,
                          width: 580/1.3,
                          height: 2300/10,
                          stroke: 'black',
                          strokeWidth: 2
                      var TextCon = new Kinetic.Text({
                          x: 10,
                          y: 240,
                          text: 'Container Size 20 (5800mm X 2300mm X 2250 mm)',
                          fontSize: 12,
                          fontFamily: 'Calibri',
                          fill: 'green',
                      layer2.add(box_con);
                      layer2.add(TextCon);
                      stage.add(layer2);
                      break;
            function addRect() {
                layer = new Kinetic.Layer();
                var box = new Kinetic.Rect({
                    x: 10,
                    y: 10,
                    width: +(($("#panjang").val()/10)/1.3),
                    height: +($("#lebar").val()/10),
                    stroke: 'blue',
                    strokeWidth: 2
                var group = new Kinetic.Group({
                            draggable: true,
                            snap : true
                var boxLabel = $("#nam_pac").val() + "/H : " + $("#tinggi").val();            
                if (($("#panjang").val() && $("#lebar").val()) != 0) {         
                var simpleText = new Kinetic.Text({
                    x: 10,
                    y: 10,
                    text: boxLabel,
                    fontSize: 12,
                    fontFamily: 'Calibri',
                    fill: 'red',
                } else {
                    var simpleText = new Kinetic.Text({
                    x: 10,
                    y: 10,
                    text: '',
                    fontSize: 12,
                    fontFamily: 'Calibri',
                    fill: 'red',
                group.add(box);
                group.add(simpleText);
                layer.add(group);
                stage.add(layer);
                layers.push(layer);
                $("#layer-to-delete").append("<option>Layer " + boxLabel + "</option>");
            function deleteRect() {
                if($("#layer-to-delete > option").length < 1) return;
                var i = $("#layer-to-delete").prop("selectedIndex");
                layers.splice(i,1)[0].destroy();
                $("#layer-to-delete > option").eq(i).remove();
            function rotateRect() {
                if($("#layer-to-delete > option").length < 1) return;
                var i = $("#layer-to-delete").prop("selectedIndex");
                layers[i].rotateDeg(30);
                layers[i].draw();
            $("#delete-layer-button").click(function(e) {
                  deleteRect();
            $("#rotate-layer-button").click(function(e) {
                rotateRect();
            $("input[type=submit]").click(function(e) {
                addRect();
            $("#isSelect").click(function () {
                  addCont();
            $("#removecon").click(function () {
                  layer2.destroy();
            $(window).keypress(function(e) {
                if(!$(document.activeElement).is("label")) {
                    if((e.keyCode || e.which) == 46) {
                        layer.destroy();
                if((e.keyCode || e.which) == 35) {
                        layer2.destroy();
            document.getElementById('saveall').addEventListener('click', function() {
              stage.toDataURL({
                callback: function(dataUrl) {
                      window.open(dataUrl);
            }, false);
          </script>
        </section>
      </section><!--End of section Area -->
      <footer class="w" id="footer"><!--footer Area -->
        Copyright <a href="login.php" target="_new">©</a> 2013, <a href="http://omhanggar.com" target="_new">created</a><a href="http://intranet.guentner-asia.com" target="_new"> by PT. Güntner Indonesia </a>
      </footer><!--End of footer Area -->
    </body>
    </html>
    thanks again before,
    Prabowo

  • IFrame in jQuery Dialog - submit iFrame using dialog button

    Hi Everyone,
    I know a lot of us are using JQuery modal dialog feature and some of us using iframe strategy to display form or page inside of modal dialog popup. Personally, I am using these features a lot in my app but there is a step where I am a bit stuck.
    Here is my situation ( I am sure most of us will be interested in this to be resolved if not yet):
    I have a regular page (will call it parent page), on this page I have a button and by clicking on this button I am getting a jquery modal window popup. The button itself is pointed to url: javascript:LinkAssets(); and the script to call modal popup with iFrame in HTML Header of parent page is:
    <script type="text/javascript">
    // Link Assets - Modal PopUp
        function LinkAssets(){
    var apexSession = $v('pInstance');
    var apexAppId = $v('pFlowId');
    var assetNumber = $v('P17_ORDER_ID');
    $(function(){vRuleBox = '<div id="LinkAssetsBox" title="Link Assets to the Order">
       <iframe src="f?p='+apexAppId+':55:'+apexSession+'::NO:55:P55_ORDER_NUMBER:'+assetNumber+'"
         width="680" height="320" title="Link Assets to the Order" frameborder="no">
       </iframe>
       </div>'
    $(document.body).append(vRuleBox);
    $("#LinkAssetsBox").dialog({buttons:{"Close":function(){$(this).dialog("close");}},
                                                                   stack:true,
                                                                   modal:true,
                                                                   width:700,
                                                                   height:340,
                                                                   resizable:true,
                                                                   autoResize:true,
                                                                   draggable:true,
                        close: function(){$("#LinkAssetsBox").remove();
                                                             location.reload(true);}
    </script> As you see I am calling page 55 from jquery script into iFarme which will be displayed in modal dialog. All described above is working fine, no problems and most of us use it.
    My problem is here: my JQuery modal dialog has a "CLOSE" button which allows me to close a modal dialog without any changes and go back to my parent page - which is normal behavior. In my iFarme page (page 55) i have an "apply changes" button, and this button calls a process on page 55 by submitting a value and than it closes the modal dialog. "APPLY Changes" button has pointed to the url: javascript:UpdateRecord(); and page 55 has a script in HTML Header to submit value and close modal dialog:
    <script type="text/javascript">
    // -- Function to apply changes and close Modal Dialog--
    function closePopup(){     
       $(function(){parent.$('*').dialog('close');});}
    function UpdateRecord(){doSubmit('APPLY_CHANGES');closePopup();}
    </script> So, what I want is not to have this "Apply Changes" button in my page 55 which is iFrame page, I want this button to be next to my jQuery modal dialog "CLOSE" button which means I have to change my modal dialog popup script to include "APPLY CHANGES" button where this button will submit value to iFrame page and close my dialog.
    I hope whatever is above is readable and understandable.
    Thanks

    since my previous solution didn't work I did try another way. I did try to create a hidden item in my iFrame page -> pass a values "APPLY_CHANGES" to this item from my "ADD" button in parent dialog window and make my DML process in my iFrame (page 55) to fire conditionally when hidden item in iFrame page has "APPLY_CHANGES" value. So, I did change my dialog window script with iframe again to include this:
    $(document.body).append(vRuleBox);
              $("#LinkAssetsBox").dialog({
                            buttons:{"Close":function(){$(this).dialog("close");}
    //from here ---------------
    ,Add:function(){location.href="f?p=&APP_ID.:55:&SESSION.::NO:55:P55_CREATE_REQUEST:APPLY_CHANGES"}
    //to here -----------------
    },               stack: true,
                   modal: true,                         
                            width: 950,
    ...and again....it passes the "APPLY_CHANGES" value to my iFrame page item ( i can see that in session view) but my process is not running or may be it is not getting values of my form items in iFrame page.
    Any ideas...comments on this???

  • Add hyperlink or button to open document in client application

    Good day.
    I have SharePoint 2013 and Office Web Apps 2013 integrated with it.
    I configured the default behavior when clicking on a document in a document library to open it in web app. 
    And I want additionally to have column in this library with hyperlink or button to open document in client application.
    I can click on menu near document name with WAC preview and then click "change" button. But in this case I make 2 clicks. So I want to have this  "change" button as a column in the list of document library.
    How can I do it?

    Hi, Daniel.
    I successfully created rich
    text type column - richtextcolumn.
    Then I created workflow associated with documents library and added action to set field in current element
    - it sets richtextcolumn with value you wrote - "<a class="ms-listlink ms-draggable"
    onclick="return DispEx(this,event,'TRUE','FALSE','FALSE','SharePoint.OpenDocuments.3','1','SharePoint.OpenDocuments','','','','1','0','0','0x7fffffffffffffff')" href="[%Current
    Item: Server Relative URL%]" DragId="7">test</a> .".
    I configured this workflow to run on element creating and editing.
    Then I upload a document and see link to this document appearing in richtextcolumn.
    But when I click this link it just download document and then open it in client application. So if I change something in this document and try to save it, it will be saved in my local download folder and not sharepoint.

  • Drag and Drop multiple boxes and snap to multiple locations then reveal button

    Hi I'm Trying to develop a small game where the user chooses from a range of boxes of the left of screen and can drag 3 of them separatley to 3 holding boxes on ther right. each box can be dragged to any location and the order is not important. Once the 3 holding boxes are all full I want a new button to appear. I completed a tutorial and I've got one box working perfectly but no matter what i try I can't get it working with multiple boxes and locations. Below is a list of the instance names of the movie clips plus my actionscript. I've attached a link to the flash file. Any help would be really appreciated. Cheers
    LINK
    http://www.sainters.net/flash_preview/flash_test/flash test_v6.fla.zip
    INSTANCE NAMES
    box 1 = "circle_mc"
    box 2 = "circle_mc2"
    both the grey boxes are called = "targetCircle"
    ACTIONSCRIPT
    function dragSetup(clip, targ) {
    clip.onPress = function() {
    startDrag(this);
    this.beingDragged=true;
    clip.onRelease = clip.onReleaseOutside=function () {
    stopDrag();
    this.beingDragged=false;
    if (eval(this._droptarget) == targ) {
    this.onTarget = true;
    _root.targ.gotoAndStop(2);
    } else {
    this.onTarget = false;
    _root.targ.gotoAndStop(1);
    //the variables below will store the clips starting position
    clip.myHomeX = clip._x;
    clip.myHomeY = clip._y;
    //the variables below will store the clips end position
    clip.myFinalX = targ._x;
    clip.myFinalY = targ._y;
    clip.onEnterFrame = function() {
    //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
    // then move the MC back to its original starting point (with a smooth motion)"
    if (!this.beingDragged && !this.onTarget) {
    this._x -= (this._x-this.myHomeX)/5;
    this._y -= (this._y-this.myHomeY)/5;
    //if the circle is dropped on any part of the target it slides to the center of the target
    } else if (!this.beingDragged && this.onTarget) {
    this._x -= (this._x-this.myFinalX)/5;
    this._y -= (this._y-this.myFinalY)/5;
    dragSetup(circle_mc,targetCircle);

    Two things...
    1) if you want both circles to be draggable you need to execute that last line twice, once for each.
    dragSetup(circle_mc); // left off second argument purposefully
    dragSetup(circle_mc2);
    2) you do not want to name the targets the same name... only one will work as a target that way.  GIve them different names, and assign each one a property like...
      targetCircle1.isTarget == true;
      targetCircle2.isTarget == true;
    and in your hittest function test for that property.  And if you don't want to allow the user to drop two circles on the same target, set that property to false after it is dropped on... something like...
    if (this._droptarget.isTarget) { // may still need eval() portion
        this._droptarget.isTarget = false;
    Back to item 1... with this approach you won't need to pass the target as an argument, unless you need to have each circle dropped on a specific target instead of any of them (in that case you go back to specifying and testing the target instance)
    Your overall dragSetup function will change in various ways if you follow what is offered here as far as allowing for any circle to be placed on any target.  If you require specific targets, then your code would remain much as it is except you still need different instance names for all the objects.

  • How can I attach an additional action to the "reset" button in the drag and drop interaction?

    Hello,
    I would like to know how to attach an additional behavior to the "reset" button in my drag and drop exercise.
    Here is the background:
    In my drag and drop exercise, when the user drops the source on a target of his choice, certain elements appear and certain elements disappear
    This means that depending on where he dropped the sources, certain elements will be visible and certain elements invisible when he is finished the activity
    Because the sources are not re-draggable once he drops them, he will have the option to reset the exercise and start again from the beginning using the reset button
    My challenge:
    I would like exercise to return to its original state when the user selects the rest button .  this means:
    the dragged objects return to their orginal starting location (this is what naturally occurs when you hit the reset button)
    any objects that had disappeared during the course of the activity reappear
    objects that were not visible in the beginning , but had appeared during the course of the activity, again become invisible
    So how can I add this action to the reset button?

    Allowing the user to redrag the souce after it has been dropped would work for my particular problem  if I could bind an action to the event redragging, namely making the elements reappear that had disappeared and the elements disappear that had appeared when the user dropped it the first time.

Maybe you are looking for