jQuery UI

Widgets - Menu and Tooltip

by Ryan Morris

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="wrapper">
    
    <div id="draggable">Drag me</div>
    
</div>

<div id="droparea">
    <p>Drop things here</p>
</div>

CSS

#draggable {
    width: 50px;
    height: 50px;
    background: #ccc;
  }

#wrapper{
    width:200px;
    height:300px;
    border:1px solid #000;
    float:left;
}

.active{
    color:#f90;
}

.hover{
    color:blue;
}
}
#droparea{
    float:left;
    width:100px;
    height:100px;
    border: 1px solid #f90;
}

JavaScript

$(function () {

    $("#draggable").draggable({
        //opacity: 0.5,
        //axis: "x",
        //containment: "#wrapper",
        scroll: false
    });
    
    $("#droparea").droppable({ 
        // restrict acceptable drag elements
        accept: "#draggable",
        drop: function() {
             console.log("Dropped in!");   
        },
        // "over" is triggered when 50% of the element is over any part of the drop area. 
        // This is known as the "tolerance" and can be configured
         //tolerance: "fit"|"intersect"|"pointer"|"touch",
        over: function() {
            console.log("Dragged over");
        },
        // "out" is triggered when the element is no longer overlapping
        out: function() {
            console.log("Dragged out");
        },
        // we may want to hightlight a drag target when the user starts dragging..
        /*
        activate: function() {
            $("#droparea").css({
                backgroundColor: "blue"
            });
        },
        deactivate: function() {
            $("#droparea").css({
                backgroundColor: ""              
            });
        }
        /**/
        // when "activate" is triggered
        //activeClass: "active",
        // when "over" event is triggered
        //hoverClass: "hover",
    });
    
    
    

});