Accept Only the Latest Dropped Draggable in a Droppable Interaction Using jQuery UI

Raymund Macaalay

Rate me:

5.00/5 (1 vote)

16 Sep 2014CPOL1 min read

10.2K

Accept only the latest dropped Draggable in a Droppable interaction using jQuery UI

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

<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 
{ width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 300px; height: 300px; padding: 0.5em; float: left; margin: 10px; }
</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>