Question

I’m quite new to JQuery but I managed to do some things on my own. I have a three input fields and three options. The options can be dragged into the input fields but there can’t be two draggables into one droppable.

This works perfectly if you don’t move the draggables over the droppables. But when you go over a droppable JQuery executes the “out” event. I was hoping for a “dropout” event which can solve my problem but there isn’t one.

(There is also a problem with the “removeClass” function, because it doesn’t work. However that isn’t a big issue…).

$(function() {
    var textbox; 

    $( ".draggable" ).draggable({ 
        revert: function ( event, ui ) {
            $(this).data("draggable").originalPosition = {
                top: 0,
                left: 0
            };
            return !event;
        },
    });

    $( ".droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {

            //check if droppabele contains draggable
            if ($(this).data("containsDrop") === 0 || $(this).data("containsDrop") === undefined) { //doesn't contain
                $(this).data("containsDrop", 1);

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

                $( this ).addClass( "ui-state-highlight" )

            } else { //contains --> go back to options
                ui.draggable.animate({ top: 0, left: 0 }, 'slow');
            }
        },
        out: function ( event, ui ) {
            $(this).data("containsDrop", 0);
            $(textbox).removeClass( "ui-state-highlight" );
        }
    });
});

I was hoping that some can take a look to at this Fiddle: http://jsfiddle.net/u7aJ7/10/

Thanks in advance.

Answer 1

I spend a few hours on it and worked out the following solution.

You can check a working example on http://jsfiddle.net/s5057285/yx3gW/

if ($("div.draggable").length > 0) {
    $("div.draggable").draggable({
        //callback 
        revert: function(droppableObj) {
            if (droppableObj === false) {
                //revert to original position
                $(this).data("draggable").originalPosition = {
                    top: 0,
                    left: 0
                };
                var textbox = $(this).data("droppable");
                $(textbox).width(74);
                $(textbox).val('');
                $(this).removeClass("dropped");

                positionDraggables();

                return true;
            } else {

                positionDraggables();

                return false;
            }
        }
    });
}

if ($("div.draggable").length > 0) {
    $("input.droppable").droppable({
        drop: function(event, ui) {
            //postition of draggable is the same as droppable
            ui.draggable.position({
                of: $(this),
                my: 'left top',
                at: 'left top'
            });
            //text from draggable in textfield
            $(this).draggable("widget").val(ui.draggable.text());
            //store the droppable in the draggable
            ui.draggable.data("droppable", this);
            ui.draggable.addClass("dropped");
            //change width and height to size of draggable
            $(this).width(ui.draggable.width());
            $(this).height(ui.draggable.height());
        }
    });
}

function positionDraggables() {
    var selects = $('body').find('div.options');
    selects.each(function(index, el) {
        var children = el.children;
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            if ($(child).hasClass("dropped")) {
                var textbox = $(child).data("droppable");
                $(child).position({
                    of: $(textbox),
                    my: 'left top',
                    at: 'left top'
                });
            }
        }
    });
}​