8 Replies Latest reply on Feb 6, 2014 11:05 AM by resdesign

    Drag and Drop with Snap into place

    KLEIN1109

      Hello!

       

      I am  trying to create a drag and drop that will snap into place when close enough to the target. I have used a tutorial to create the inital drag and drop. I have also been working to make sure that the file works on with touch on a mobile device.  The tutorial i used is here http://www.lokehansen.com/blog/2012/12/05/edge-animate-drag-drop-made-easy/.

       

      Here is what my code is looking like

      Screen Shot 2013-12-10 at 9.29.35 AM.png

       

      I would really like to be able to get the draggable object to snap to a position when dropped close enough to the droppable zone. I am a bit of a novice so any help would be greatly appreciated.

        • 1. Re: Drag and Drop with Snap into place
          resdesign Adobe Community Professional & MVP

          Check out this example here:

          http://jsfiddle.net/s5057285/yx3gW/

          1 person found this helpful
          • 2. Re: Drag and Drop with Snap into place
            KLEIN1109 Level 1

            This does have the functionality that i am looking to implement. I am not very expeirenced with coding so i am having trouble with how to combine the code I am using with the code you have provided. Any information you could provide would be great. Sorry if my jargan is wrong I am very new to working with code. 

            • 3. Re: Drag and Drop with Snap into place
              KLEIN1109 Level 1

              I have also been looking at some of the code provided here. http://api.jqueryui.com/draggable/. Specifically the snappable section. I see the  provided code but am unsure how to properly inject it.

              • 4. Re: Drag and Drop with Snap into place
                resdesign Adobe Community Professional & MVP

                What you need to do is record the position of your droppable in an array and then use that for your draggables.

                1 person found this helpful
                • 5. Re: Drag and Drop with Snap into place
                  KLEIN1109 Level 1

                  Thanks for your response. I am unsure of how or in what place (line of code) to record my droppable. I do not know what the code would look like. I have combed over your example and see things I think might create the snappable functionality however none of it has been working when i try and inject it into my own code.

                   

                   

                  Here is my code for reference:

                   

                   

                  yepnope(

                  {

                  nope:[

                   

                   

                  // loads the external JQuery Ui for dragging and dropping

                  'jquery-ui-1.10.3.custom.min.js',

                  'jquery.ui.touch-punch.min.js'

                  ],

                   

                   

                  complete: init

                   

                   

                  });

                  function init(){

                  // apply the draggable JQuery UI plugin to the MyDraggableSymbol symbol on your stage

                            sym.$('MyDraggableSymbol').draggable({

                            start: function(e){},

                            drag: function(e,ui){},

                  })

                   

                   

                   

                   

                   

                   

                  sym.$('MyDroppableSymbol').droppable({

                  drop: function() {

                  alert( "!!!!!!" );

                  }

                  });;

                  1 person found this helpful
                  • 6. Re: Drag and Drop with Snap into place
                    resdesign Adobe Community Professional & MVP

                    You need to give a class name to your draggable in order for it to be accepted only in the right droppable.

                    Use this for your draggable to place themselves in the right place in your droppable.

                    sym.$('yourdraggable').addClass('myDraggable');

                    sym.$('yourDroppableName').droppable({

                                             accept: '.myDraggable',  // this is the class name - do not forget the dot because it is the way to use a class name

                                             drop: function ( event, UI){

                                  ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );   // this snaps your element in its proper place on the droppable.

                              }

                     

                              });

                    • 7. Re: Drag and Drop with Snap into place
                      KLEIN1109 Level 1

                      Hey this is really helpful thanks you. Is "left top" referring to anything? It seems to accept my symbol at almost any place on the shape instead of snapping into a predetermined position.

                      • 8. Re: Drag and Drop with Snap into place
                        resdesign Adobe Community Professional & MVP

                        Yes - in css left is the x axis and top the y axis.

                         

                        In this line:

                        ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );

                        or another example:

                        ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );

                         

                        accept different values - you can use:

                        left, top

                        center

                        bottom

                        etc...