Skip navigation
Currently Being Moderated

Drag and drop

Nov 1, 2012 8:04 PM

Tags: #interaction #animation #position #adobe_edge #drag_and_drop #adobe_edge_animate

Hi!

 

Does anyone has any helpful, working codes for doing a drag and drop with animations after dropping into the droppable area? I need the drag and drop to be done in Adobe Edge. I have done one but I can't figure out why the animation does not play accordingly even after tweaking the codes. I'm not sure if it's just a bug in the Adobe Edge trial.

 

Thank you for your time.

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Nov 2, 2012 4:14 AM   in reply to Aiesyaah

    http://jqueryui.com/

    Lots of code at this site inc drag and drop

    Alistair

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2012 9:15 AM   in reply to Aiesyaah

    Here is a way to use it:

     

     

    $.getScript("js/jquery-ui-1.9.1.custom.min.js", function() {

    var info = sym.$("info");

    info.draggable({ disabled: false });

    info.draggable({ snap: true });

    info.draggable({ axis: "x" });

     

     

    });

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 11:01 AM   in reply to Aiesyaah

    The above code and plugin worked fine for me on my computer, but not on the ipad which pretty much makes it worthless these days.  Does anyone have code to get the threedub media drag and drop plugins to work in Edge? http://threedubmedia.com/code/event/drag/demo/basic

     

    These plugins work perfectly on the ipad.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 11:28 AM   in reply to oonanoona70

    Is that a jquery pluggin?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 12:49 PM   in reply to resdesign

    Thanks for your response!

     

    Yes, it uses Threedub media's jquery.event.drag-2.2 and jquery.event.drag.live-2.2.js that you can download here: http://threedubmedia.com/code/event/drag 

     

    I just can't get the right code in compositionReady to get it to work. 

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 1:11 PM   in reply to oonanoona70
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 2:07 PM   in reply to resdesign

    This one looks great too.  My problem is more that I don't know how to get it to work in Edge.  I can get the code you added above, back in Februrary to work in Edge, but I don't know what to change, aside from the plugin name, to get it to work with other plugins such as pep or threeDubmedia. 

     

    $.getScript("js/jquery-ui-1.9.1.custom.min.js", function() {

    var info = sym.$("info");

    info.draggable({ disabled: false });

    info.draggable({ snap: true });

    info.draggable({ axis: "x" });

     

     

    });

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 2:20 PM   in reply to oonanoona70

    I tried to replicate one of the basic Pep demos in Edge but it doesn't work with Edge:

     

    $.getScript("js/jquery.pep.js", function() {

    $('circle').pep({

      constrainToParent: true

    });

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 3:37 PM   in reply to oonanoona70

    Try yepnope to load your pluggin as below. Note the setting for your targetted symbol are between the {} in the lines below. viking is the name of the symbol.    .zoom({}) is the pluggin line in which you add the  parameters.

     

       var viking = sym.$("viking");

      viking.zoom({url: 'images/viking.png'});

      viking.zoom({icon: 'true'});

     

     

    ...................................................................... ...................................................................... .........

     

    yepnope(

    {

              nope:[

              // add your js pliggin path here

              'js/jquery.zoom-min.js',

              ],

              complete: init

    }

    );

     

     

    $(document).ready(function(){

        $('img')

            .wrap('<span style="display:inline-block"></span>')

            .css('display', 'block')

            .parent()

            .zoom();

     

     

    });

     

     

    function init() {

       var viking = sym.$("viking");

              viking.zoom({url: 'images/viking.png'});

              viking.zoom({icon: 'true'});

              var viking2 = sym.$("viking2");

              viking2.zoom({url: 'images/viking.jpg'});

    }

     

    ...................................................................... ...................................................................... ...........

     

    You can also check how I did the weather pluggin:

    http://forums.adobe.com/message/4850519#4850519

    ...................................................................... ...................................................................... ..............

    For the jquery.pep pluggin you add the parameters between the {} -

     

    sym.$("yourElement").pep({debug: true, drag: function(ev,obj){ console.log('we're dragging!') }, multiplier: 1.2 });

     

    or in this case the parameter are grouped into the variable "option" and this is what is passed in the parentheses  pep(option).

    var options = {
      debug:          true,
      drag:           function(ev,obj){ console.log("we're dragging!") },
      multiplier:     1.2
    };


    sym.$("yourElement").pep(options);

     

    // let me know if you need more input.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 22, 2012 2:16 AM   in reply to resdesign

    resdesign,

     

    could u give us an example in adobe edge?

     

    simple example with only one object, dragging around in adobe edge like this?

     

    Here is a simple example with one object!

     

    What should i do?

     

    http://oi46.tinypic.com/2cwldsi.jpg

     

    only want to drag and move the cycle.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 22, 2012 5:31 AM   in reply to Digiddorf

    Here is an example. It is a rectangle instead of a circle. Sorry I will be out today until the afternoon.

     

    https://www.box.com/s/x91cv8pggdmrriarh74c

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 22, 2012 5:35 AM   in reply to resdesign

    Thank u so much! *kisses*

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 22, 2012 6:14 AM   in reply to Digiddorf

    Will try do give a more detailed example later today or tomorrow.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 1:48 PM   in reply to Aiesyaah

    The jquery.pep.js works with tablets. You will have to write your own code to accomplish what you want.

    You have settings that are documented here:

    https://github.com/briangonzalez/jquery.pep.js

     

    draggable with jqueryUI will work it you add touch events and may give you move flexibility.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 26, 2012 9:33 AM   in reply to Aiesyaah

    Not sure what is happening. I do not have my iPad today to check the behavior. I will check tomorrow but I hope someone can help you before.

     

    In the mean time could you post a sample?

     

    At first look without an Ipad to test:


    I think that you should probably add z-index for each element so that the last touched symbol moves out of the top and lets you drag the other symbols.

     

    I added this on touchmove

     

    sym.$("_1").css("z-index", 100);

     

    and this on touchend;

     

    sym.$("_1").css("z-index", 0);

     

    Where did you put your code? I see some conflicts with css and variables.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2012 9:44 AM   in reply to Aiesyaah

    Maybe you could check this site to see if that can help:

    http://briangonzalez.org/blog/pep

     

    I will look at it tonight.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2012 9:08 PM   in reply to Aiesyaah

    You do need to have the jquery-pep.js file in your project.

    Below is how to load it:

     

    yepnope(

    {

              nope:[

              'js/jquery.pep.js',

              ],

              complete: init

    }

    );

     

      

    function init() {

       var rectangle = sym.$("Rectangle");

       //limit element drag to its container

              rectangle.pep({constrainToParent: true});

    }

     

     

    You can insert your code in the init function.

     

    You can also have callbacks. See the yepnope doc for more info at:

    http://yepnopejs.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2012 9:13 AM   in reply to Aiesyaah

    Here is a working very simple sample using

    jquery-ui-1.9.2.custom.min.js  // for draggable and droppable

    and

    jquery.ui.touch-punch.min.js   // adds function on tablets.

     

    https://www.box.com/s/vtile6ea3h16g2nm1fuz

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 29, 2012 5:40 AM   in reply to Aiesyaah

    Check the updated file below to play a symbol for your feedback. You have to uncheck autoplay in the symbol.

    The container in the file was a test for constrain but the stage can be used instead of that container if you want to make sure that the droppables are not dragged outside of the stage and lost! This is also updated in the new file.

     

    https://www.box.com/s/vtile6ea3h16g2nm1fuz

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 29, 2012 9:32 AM   in reply to resdesign

    i need an example for jquery.pep and this case:

     

    dropping an item above another… then open a new URL!

     

    Could somebody help me?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 12:32 PM   in reply to resdesign

    Hey There,

     

    I was wondering how you delared the accept: ".case1", ?? If I look at your file it and try to use another asset for the draggable objects it no longer triggers the box animation... unless I comment out the accept... but that is crutial for specifying which draggable objects react with the specific targets. I noticed the JSON file and wondered what was referencing that, or if that was handling something that I was unaware of.

     

    Also I noticed when you publish it and preview in the browser you have to click and drag on the gray sqaures 3-8 times to actually get them to drag, unlike when testing from Edge.

     

    I can tell how knowledgeable you are and wondered if you could help shed some light on this for me...

     

    Thx so much!

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 12:41 PM   in reply to designedbyjackley

    You have to give the elements a class ID.  Click on the element, click on the C in the gray box and then type in the element class name.

    12-3-2012 1-51-15 PM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 12:52 PM   in reply to designedbyjackley

    "Also I noticed when you publish it and preview in the browser you have to click and drag on the gray sqaures 3-8 times to actually get them to drag, unlike when testing from Edge."

     

    Strange. I tried several browsers and did not have this issue.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 12:54 PM   in reply to resdesign

    Blazing fast reply! AMAZING! ... Have you noticed having to click and drag it multiple times in the browser before it actaully starts dragging after publishing the file?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 12:58 PM   in reply to resdesign

    I just noticed I was missing the CSS folder... doh! Thx for the ahhhah moment!

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (2)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points