Jquery UI drag and drop

For past many days i have been struggling to make a draggable and droppable event with specific CSS effect. All i want is , when draggble enters or touches the droppable , an under line should appear. i am fine with underline text-decoration thing if it gives me freedom to change color and space between text/element. And when draggable over/fit , the droppable should highlight. I have tried many things out there but no luck so far. I am using below code where any element can be draggble and droppable. Please help.

<!doctype html>
<html lang = "en">
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>

.nav li{
  padding: 8px; 
  text-decoration: none;
  color: blue;
  text-align: left; 


.UnderLine {
  border-bottom: 4px solid blue; 

.BcgColor {
  background-color: yellow;

             border-color : cyan;
             background :#F781D8;
    border-color : red;
    background : #00FF80;

<!-- .nav li span:after{
  content: "";
  bottom: 0;
  height: 2px;
  background: brown;
  text-align: left;
} -->



         $(function() {

         //console.log("About 1 "+  $("li").css("width")  );
         //console.log("About 2 "+  $("#DragContact").innerWidth()   );

         var mywid = '94px'          
         $("li").css({"width": mywid});

         var myimg = $('<img/>').attr({
            $( "li" ).draggable({
                            revert: 'invalid',
                            /*cursor: "pointer",
                            cursorAt: { top: -10, left: -20 },
                            helper: function( event ) {
                            return $( myimg );
                            drag: function( event ) {
            $( "li" ).droppable({                       
                        tolerance: "touch",
                        hoverClass: "UnderLine",
                        over: function(event, ui) {
                            console.log("i am over")
                        out: function(event, ui) {
                            console.log("i am out")
                        drop: function(event, ui) { 
                        console.log("hi dropped ");
            $( "li2" ).droppable({                      
                        tolerance: "intersect",
                        hoverClass: "BcgColor",
                        drag: function( event ) {
                                console.log("hello dragging")
                        drop: function(event, ui) { 
                        console.log("hi drop intersect")


      <ul class="nav">
        <li id="About">About</li>
        <li id="Portfolio">Portfolio</li>
        <li id="Contact">Contact</li>
        <li id="DragContact">DragContact</li>


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.