Jquery ui jquery可拖放下划线和高亮显示_Jquery Ui

Jquery ui jquery可拖放下划线和高亮显示

jquery-ui

Jquery ui jquery可拖放下划线和高亮显示,jquery-ui,Jquery Ui,在过去的许多天里，我一直在努力制作一个具有特定CSS效果的可拖放事件。我想要的是，当Dragble进入或接触Dropable时，应该会出现一条下线。如果下划线文字装饰能让我自由地改变文字/元素之间的颜色和空间，我对它没意见。当可拖拽/适合时，可拖拽应突出显示。我在那里尝试了很多东西，但到目前为止运气不好。我使用下面的代码，其中任何元素都可以拖放。请帮忙 <!doctype html> <html lang = "en"> <head> &l

在过去的许多天里，我一直在努力制作一个具有特定CSS效果的可拖放事件。我想要的是，当Dragble进入或接触Dropable时，应该会出现一条下线。如果下划线文字装饰能让我自由地改变文字/元素之间的颜色和空间，我对它没意见。当可拖拽/适合时，可拖拽应突出显示。我在那里尝试了很多东西，但到目前为止运气不好。我使用下面的代码，其中任何元素都可以拖放。请帮忙

<!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 UI可拖放-默认功能
李国荣先生{
显示：块；
位置：相对位置；
填充：8px；
利润率：16px；
文字装饰：无；
颜色：蓝色；
文本对齐：左对齐；
}
.下划线{
底部边框：4倍纯蓝；
}
.BcgColor{
背景颜色：黄色；
}
.主动
{
边框颜色：青色；
背景#F781D8；
}
悬停
{
边框颜色：红色；
背景：#00FF80；
}
$（函数（）{
//console.log（“大约1”+$（“li”）.css（“宽度”）；
//log（“大约2”+$（“#DragContact”）.innerWidth（）；
var mywid='94px'
$（“li”）.css（{“宽度”：mywid}）；
var myimg=$（'

1关于
2组合
3个联系人
4 DragContact

看起来您忘记包含jQuery ui。您的选择器看起来不正确。例如：

导航栏折叠。导航

不是正确的选择器。如果这是一个ID，您必须使用

。如果这是一个类，您将要使用

。例如：

$（'.navbar collapse.nav'）。dropable（）

一直在研究这个问题，但是你的代码没有一个是有意义的。你的Dragable是整个元素，也是可拖放的。应该拖放什么？就像一个新的导航元素一样？只是不清楚。添加了新的代码，它处于工作状态，但不符合预期。仍然难以处理两个不同的t css效果。