Question

在过去的很多天里，我一直在努力制作具有特定CSS效果的可拖动和可投放事件。我想要的是，当draggble进入或触摸droppable时，应该出现一个下划线。如果它能让我自由地改变文本/元素之间的颜色和空间，那么我可以使用下划线文本修饰。当可拖动/适合时，droppable应该突出显示。我已经尝试了很多东西，但到目前为止没有运气。我使用下面的代码，其中任何元素可以是draggble和droppable。请帮忙。

<!doctype html>
<html lang = "en">
   <head>
      <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>
    </head>
      <style>

.nav li{
  display:block;
  position:relative;  
  padding: 8px; 
  margin:16px;
  text-decoration: none;
  color: blue;
  text-align: left; 


}

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

.BcgColor {
  background-color: yellow;
}

.active
       {
             border-color : cyan;
             background :#F781D8;
        }
.hover
{
    border-color : red;
    background : #00FF80;
}

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

      </style>

      <script>

         $(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({
                        src:"add-icon.png",
                        width:15
                        })
         //$("li").addClass('UnderLine')
            $( "li" ).draggable({
                            revert: 'invalid',
                            /*cursor: "pointer",
                            cursorAt: { top: -10, left: -20 },
                            helper: function( event ) {
                            return $( myimg );
                            },*/
                            drag: function( event ) {
                                $(this).css('opacity','0.2');
                            }
                        });
            $( "li" ).droppable({                       
                        tolerance: "touch",
                        hoverClass: "UnderLine",
                        over: function(event, ui) {
                            console.log("i am over")
                            $(this).addClass('BcgColor');
                        },
                        out: function(event, ui) {
                            console.log("i am out")
                            $(this).removeClass('BcgColor');
                        },
                        drop: function(event, ui) { 
                        console.log("hi dropped ");
                        $(this).removeClass('BcgColor');
                        $(this).after($(ui.draggable));
                        $(ui.draggable).css('opacity','1');
                        } 
                    }); 
            $( "li2" ).droppable({                      
                        tolerance: "intersect",
                        hoverClass: "BcgColor",
                        drag: function( event ) {
                                console.log("hello dragging")
                                $(this).css('opacity','0.2');
                            },
                        drop: function(event, ui) { 
                        console.log("hi drop intersect")
                        console.log($(this).nodeName)
                        $(this).removeClass('BcgColor');
                        $(this).after($(ui.draggable))                             
                        }
                    });     
        });     

      </script>

   <body>
    <div>
      <ul class="nav">
        <li id="About">1 About</li>
        <li id="Portfolio">2 Portfolio</li>
        <li id="Contact">3 Contact</li>
        <li id="DragContact">4 DragContact</li>
      </ul>
    </div>

   </body>
</html>

jquery droppable下划线和突出显示

0 个答案: