Question

我需要2个问题的帮助：

1）如果可拖动元素没有落在指定的丢弃区域之一上（例如，如果用户无意中释放了鼠标左键），则禁用可拖动性。在所有其他情况下，拖放按预期工作：创建克隆并可用于拖放到任何指定的放置区域。我试图“禁用：假”可拖动，但它没有帮助。

2）每个“dropContainer”只能接受/允许一个答案（例如.dropTarget_m_1_1_a只接受一滴，无论答案是正确还是错误）。我尝试通过关联数组（链接dropContainer和特定的drop元素的id）提供更具体的名称，但没有运气。我可以对其进行硬编码以禁用特定的类，即$（“。dropTarget_m_1_1_a”）。droppable（“disable”）;不幸的是我需要迭代，例如遍历每个.dropTargetxxxxx类或每个dropContainerxxx id。

非常感谢你提前!!!

到目前为止，这就是我所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>

<script src="js/jquery-ui.js"></script>  

<style>

ul {
  list-style-type: none;
}

li.draggable {
    list-style:none;
}

#button_list_1a li {
display: inline-block;
list-style-type: none;  
width: 60px;
height: 10px; 
margin-top: 70px;  
}

  #m_1_l_3 {
    position: absolute;
    top: 25px;
    left: 80px;
    height: 15px; 
    width: 110px; 
    display:flex;   
    align-items:center;
    z-index: 10;
   opacity: 0.3;
   -moz-opacity: 0.3;
   filter: alpha(opacity=30);
   background-color:blue;
  } 

  #m_1_l_2 {
  position: absolute;
  top: 40px;
  left: 80px;
  height: 15px; 
  width: 110px; 
  display:flex;     
  align-items:center;
  z-index: 10;
  opacity: 0.3;
 -moz-opacity: 0.3;
 filter: alpha(opacity=30);
 background-color:red;
  }

  #m_1_l_1 {
  position: absolute;
  top: 55px;
  left: 80px;
  height: 15px; 
  width: 110px; 
  display:flex;     
  align-items:center;
  z-index: 10;
  opacity: 0.3;
 -moz-opacity: 0.3;
 filter: alpha(opacity=30);
background-color:yellow;
  }  

  #m_2_l_3 {
  position: absolute;
  top: 25px;
  left: 210px;
  height: 15px; 
  width: 110px; 
  display:flex;     
  align-items:center;
  z-index: 10;
  opacity: 0.3;
  -moz-opacity: 0.3;
  filter: alpha(opacity=30);
  background-color:blue;
  }  

  #m_2_l_2 {
  position: absolute;
  top: 40px;
  left: 210px;
  height: 15px; 
  width: 110px; 
  display:flex;     
  align-items:center;
  z-index: 10;
  opacity: 0.3;
  -moz-opacity: 0.3;
  filter: alpha(opacity=30);
   background-color:red; 
  }

  #m_2_l_1 {
  position: absolute;
  top: 55px;
  left: 210px;
  height: 15px; 
  width: 110px; 
  display:flex;     
  align-items:center;
  z-index: 10;
 opacity: 0.3;
 -moz-opacity: 0.3;
 filter: alpha(opacity=30);
  background-color:yellow;
  }

  #m_3_l_3 {
  position: absolute;
  top: 25px;
  left: 350px;
  height: 15px; 
  width: 110px; 
  display:flex;     
  align-items:center;
  z-index: 10;
 opacity: 0.3;
 -moz-opacity: 0.3;
 filter: alpha(opacity=30);
  background-color:blue;
  }

  #m_3_l_2 {
  position: absolute;
  top: 40px;
  left: 350px;
  height: 15px; 
  width: 110px; 
  display:flex;     
  align-items:center;
  z-index: 10;
 opacity: 0.3;
 -moz-opacity: 0.3;
 filter: alpha(opacity=30);
  background-color:red;
  }

  #m_3_l_1 {
  position: absolute;
  top: 55px;
  left: 350px;
  height: 15px; 
  width: 110px; 
  display:flex;     
  align-items:center;
  z-index: 10;
  opacity: 0.3;
  -moz-opacity: 0.3;
  filter: alpha(opacity=30);
  background-color:yellow;
}

</style>  

</head>

<body>   

<div id="dropContainer_m_1">

<div id="m_1_l_3" class= "dropTarget_m_1_1_a droppable_1_a"></div>  


<div id="m_1_l_2" class= "dropTarget_m_1_1_a droppable_1_a"></div> 

<div id="m_1_l_1" class= "dropTarget_m_1_1_a droppable_1_a"></div>    


<div id="dropContainer_m_2">    
<div id="m_2_l_3" class= "dropTarget_m_2_1_a droppable_1_a"></div>    


<div id="m_2_l_2" class= "dropTarget_m_2_1_a droppable_1_a"></div>

<div id="m_2_l_1" class= "dropTarget_m_2_1_a droppable_1_a"></div>    


<div id="dropContainer_m_3">  
<div id="m_3_l_3" class= "dropTarget_m_3_1_a droppable_1_a"></div>    


<div id="m_3_l_2" class= "dropTarget_m_3_1_a droppable_1_a">
</div>

<div id="m_3_l_1" class= "dropTarget_m_3_1_a droppable_1_a"></div>    

  </div>     

    <ul id = "button_list_1a">
<!--// answers 1 a    -->   
<li class = "button_small draggable_1_a" id = "image#1" draggable="true">Image#1</li><!--
 --><li class = "button_small draggable_1_a" id = "image#2" draggable="true">Image#2</li><!--    
 --><li class = "button_small draggable_1_a" id = "image#3" draggable="true">Image#3</li>
  </ul>

<script>

$(document).ready(function a_1_dnd(){
  $(".draggable_1_a").draggable({

  cursorAt: {
  top: 5, 
  left: 30
},
  cursor : 'pointer',   
  revert : 'invalid',
  opacity: 0.35,     

  helper: function (event) {
    var id = $(this).attr('id');
    var ret = $(this).clone();
    ret.attr('dragId', id);
    console.log('dragId: ', ret.attr('dragId'));
    return ret;
  },

  start : function (event, ui) {
        }, // end start
  drag : function (event, ui) {     
      }, // end drag
  stop : function(event, ui){
     ui.helper.clone().appendTo ($(this).parent()); 

    ui.helper.clone().disabled;
    }
 });

    $(".droppable_1_a").droppable({
  accept: ".draggable_1_a",

  tolerance: 'pointer',

  drop: function (event,ui) {

    var draggable_id = ui.draggable.attr("id");
    var droppable_id = $(this).attr("id");

    var correctAnswer = {
        m_1_l_1 : "image#1",
        m_1_l_3 : "image#1",
        m_2_l_2 : "image#2",
        m_3_l_1 : "image#3"
    };

if(correctAnswer[droppable_id] === draggable_id) 
{
      console.log(ui);
      $(ui.draggable).attr('id', $(ui.helper).attr('id'));      
      console.log(droppable_id);

  localStorage.totalCorrectAnswers = parseFloat(localStorage.totalCorrectAnswers) + 1.0;      

  } else {  
    console.log(ui.helper.attr( "dragId" ));
    console.log("Wrong!!!");
    console.log(droppable_id);   

      }  
     }
  }); 
});

</script>

</body> 

</html>

Answer 1

您应该首先看到的是您创建的克隆。在没有放置区域的区域中的“mouseup”事件之后，克隆正在原始可投放元素所在的位置移动。

克隆是防止点击元素的东西。实际上，您单击克隆，而不是单击droppable元素

所以我建议你将克隆附加到droppable元素，这意味着移动这些行

ui.helper.clone().appendTo ($(this).parent());
ui.helper.clone().disabled;

到 droppable 元素的«drop»事件处理程序而不是draggable。因此，只有在三个容器中的一个容器中放置了可拖动元素时，才会创建克隆。考虑到您需要修改CSS以使克隆可见。

第二个问题可能是我在同一个处理程序中解决的，你应该加上类似

的东西

$(this).parent().find(".droppable_1_a").droppable({  disabled: true });

那里。

此行将禁用一个父容器中的所有可放置元素

jquery拖放 - 在指定掉落区域之外掉落后不启用拖动功能。跌落完成后禁用指定区域

1 个答案: