jQuery-ui—交互（interraction）（有点问题）

有个小问题：颜色块的位置如果跟两个列表选项的位置替代的话，列表不能操作（改变列表位置和点击后颜色改变）

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hallo world</title>
    <script src="resource/jquery-3.3.1.js"></script>
    <script src="resource/jquery-ui.min.js"></script>
    <script src="interraction.js"></script>
    <link rel="stylesheet" type="text/css" href="resource/jquery-ui.min.css">

    <!--jQuery的使用，要先引入jQuery库，再引入jQuery-ui最后再引入自己的文件，他们是下面一级基于上面一级执行的
    如果自己写css文件和js文件，也要判断是否自己的js操作了css样式，如果js文件就要后引入（如果没用中间引入了不需要操作的文件
    如ui的CSS样式，放在了自己的jS文件前面，程序会出现问题）-->
    
    <style>
        .ui-selected{
            /*这个是selectable（）方法调用时，选中之后标签之后，浏览器会在某标签中添加这个属性*/
            background-color: coral;
        }
        #container{
            position: absolute;
            padding-left: 400px;
        }
        /*将两个列表块，向右平移，提升空间利用率*/
    </style>
</head>
<body>
      <div id="container">
          <h3>LPL最强战队，你觉得是哪个</h3>
          <ul id="selection">
              <li>A.RNG</li>
              <li>B.RW</li>
              <li id="right">A.IG</li>
              <li>A.EDG</li>
          </ul>
          <a href="#" id="aId">想好了</a>

          <h3>LPL最强战队，你觉得是哪个</h3>
          <ul id="selection2">
              <li>A.RNG</li>
              <li>B.RW</li>
              <li>A.IG</li>
              <li>A.EDG</li>
          </ul>
      </div>
      
      <p><div style="width:75px;height: 75px;border: 5px solid blue" id="divId"></div></p>
      <p><div style="width:125px;height: 125px;border: 5px solid coral" id="divId2"></div></p>
      <P><div style="width:75px;height: 75px;border: 5px solid red" id="divId3"></div></P>
      <!--这三个颜色块的位置必须放在选择列表的前面，不然无法选择，原因：可能是选项背景的加载不出来或者颜色块的前面的部分默认功能除去-->
</body> 
</html>

JS代码：

$(document).ready(function () {
   $("#divId").draggable();
    //draggable:可拖动
    
   $("#divId2").droppable();
   //droppable:可放置，这里如果不写，下面的代码无法实现
   $("#divId2").on("drop",function (event,ui) {
       $("#divId2").text("你已经放进来了，亲");
   });
   
   $("#divId3").resizable();
   //resizeable: 可改变尺寸的
   
   $("#aId").button();
   $("#selection").selectable();
   $("#aId").on("click",function () {
       if($("#right").hasClass("ui-selected")){
          //hasClass() 方法检查被选元素是否包含指定的 class
          alert("老哥，有眼光")  
       }else{
          alert("老哥，再想想？")
       }
   });
   //selectable:可被选择的
   
   $("#selection2").sortable(); 
   //sortable:可排序的
});

效果：

jQuery-ui—交互（interraction）（有点问题）

猜你喜欢