Accept only the latest dropped draggable in a droppable interaction using jQuery UI

By | November 15, 2013

draggabel-droppable

You might be looking for a solution something like a radio button but don’t want to use the old school HTML input types, you want something interactive like dragging and dropping objects in a certain location.  Since it should work like a radio button you want that certain location to hold one object and only the latest object chosen, well you’re in luck as I have to create something similar and here is how I executed it.


By using a draggable and droppable interactions from jQuery UI life becomes easier as animation and interactions are handled by jQuery and jQuery UI all you need to do is use them.  All we need to do is create some functions to restrict the droppable interaction to accept only one draggable and only the latest one.  If it has some draggable already inside then we need to remove them and place them back to its original position.  If you also want to empty everything inside the droppable then the draggable positions should also reset to its original location.

Now have you ever imagined doing this only with JavaScript?  Well that will make you crazy specially if that’s not your main language used in your coding, doing this with jQuery is being smart because using it makes document traversal, document manipulation, event handling and animation much simpler but if you want to be even more smarter use jQuery UI which makes common web interactions easier hence making your web application even more interactive.

Now enough with the talking and let’s do some coding.

<html>
<head>
<meta charset="utf-8" />
<title>Raymund Macaalay's Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#draggable1#draggable2#draggable3 { width100pxheight100pxpadding0.5emfloatleftmargin10px 10px 10px 0; }
#droppable { width300pxheight300pxpadding0.5emfloatleftmargin10px; }
</style>
<script>
    $(function () {
        var pastDraggable = "";
        $("#draggable1").draggable({
            start: function () {
                Positioning.initialize($(this));
            },
        });
        $("#draggable2").draggable({
            start: function () {
                Positioning.initialize($(this));
            },
        });
        $("#draggable3").draggable({
            start: function () {
                Positioning.initialize($(this));
            },
        });
        $("#droppable").droppable({
            //Event to accept a draggable when dropped on the droppable
            drop: function (event, ui) {
                $(this).addClass("ui-state-highlight").find("p").html("Dropped!");

                //Get the current draggable object
                var currentDraggable = $(ui.draggable).attr('id');

                //If there is an object prior to the current one
                if (pastDraggable != "") {
                    //Place past object into its original coordinate
                    $("#" + pastDraggable).animate($("#" + pastDraggable).data().originalLocation, "slow");
                }

                //Store the current draggable object
                pastDraggable = currentDraggable;
            },
            //Event to accept a draggable when dragged outside the droppable
            out: function (event, ui) {
                var currentDraggable = $(ui.draggable).attr('id');
                $(ui.draggable).animate($(ui.draggable).data().originalLocation, "slow");
            }
        });
    });
    var Positioning = (function () {
        return {
            //Initializes the starting coordinates of the object
            initialize: function (object) {
                object.data("originalLocation", $(this).originalPosition = { top: 0, left: 0 });
            },
            //Resets the object to its starting coordinates
            reset: function (object) {
                object.data("originalLocation").originalPosition = { top: 0, left: 0 };
            },
        };
    })();
</script>
</head>
<body>
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<div id="draggable1" class="ui-widget-content">
  <p>1</p>
</div><div id="draggable2" class="ui-widget-content">
  <p>2</p>
</div><div id="draggable3" class="ui-widget-content">
  <p>3</p>
</div>
</body>
</html>

Simple as that!

For live demo visit the JSFiddle linke below

http://jsfiddle.net/rsmacaalay/fM63u/


3 thoughts on “Accept only the latest dropped draggable in a droppable interaction using jQuery UI

  1. goliarth

    how to add helper class to dragabble element, which is dropped and remove when is out or replaced by another ??

    Reply

Leave a Reply