jQuery - How do I make sure draggable can only be dragged to 2 places?

Question

I got a little problem, which will be easy to solve for some smart people around here. I have been breaking my head about it for days now.

I used jQuery succesfully to create draggables and droppables. The only problem I can't solve is the following:

How do I make sure that a draggable only can be dragged to a droppable? If it is not dragged inside a droppable it should return to it's starting location.

I use the following code (which works succesfully) to make sure a draggable can only be dragged to a droppable, or else it will jump back to it's starting location.

var question = '#question' + i;
    $(question).draggable( {
        containment: '#content',
        cursor: 'move',
        snap: '#content',
        revert: 'invalid',
);

The revert: invalid part does the trick.

However, how do I do this for when it already once has been dragged into a droppable? When I drag a draggable into the droppable, and then drag it outside again it can stay anywhere on the screen (this is because I set the option to false: ui.draggable.draggable( 'option', 'revert', false ); I need the draggable to return to it's starting location again when it is dragged out of the droppable.

Can anyone push me in the right direction? / Any suggestions?

JSFiddle : Click here

Cheers!

score 1 · Accepted Answer · edited May 23 '17 at 12:05

You can use a revert function like suggested here : (With a jsfiddle sample here)

$(function() {
    $("#draggable").draggable({
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        }
    });
    $("#droppable").droppable();
});

I am using jQuery version 1.7.2 and jQuery UI version 1.10.3. When I replace `uiDraggable` with `draggable` or `ui-draggable` (because `uiDraggable`doesn't work) it doesn't work either. Why wouldn't this work? — JiFus, Jul 23 '14 at 11:47

score 0 · Answer 2 · answered Jul 23 '14 at 11:35

0

DEMO

js code:

$( init );

function init() {
    // Create droppable
            $('<div id="slot1"></div>').appendTo( '#questionSlots' ).droppable( {
              accept: '#questionsHolder div',
              hoverClass: 'hovered',
                drop:function(event, ui){
                    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                }
            } );

    $('#questionsHolder').droppable( {
              //accept: '#slot1 div',
              hoverClass: 'ui-state-highlight',
                 drop:function(event, ui){
                    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                }            
            } );

// Make question draggable
    $("#question1").draggable( {
        cursor: 'move',
        //snap: '#content',
        revert: 'invalid'
        } );


}

answered Jul 23 '14 at 11:35

Rahul Gupta

9,775
7
56
69

Let me know if you have any problem ! – Rahul Gupta Jul 23 '14 at 11:36
This doesn't seem to work, when you remove the draggable from the droppable again it doesn't go back to it's original location. – JiFus Jul 23 '14 at 11:37
But try dropping it on the `question holder` div, the question will again drop into it ! – Rahul Gupta Jul 23 '14 at 11:41
That works, but the problem I'm having is the following: If a question has been dropped onto the droppable, and I remove it again, it should revert back to it's starting location ('the question holder div') – JiFus Jul 23 '14 at 11:50

jQuery - How do I make sure draggable can only be dragged to 2 places?

2 Answers2