jQuery拖放 - 拖放到指定放置区域之外后不启用可拖动，并在拖放完成后禁用指定区域 - jquery drag drop - draggable is not enabled after drop outside designated drop areas & disabling designated areas after drop is completed 小贝子编程网

我有两个问题需要帮助:

1)如果可拖动元素没有在指定的拖放区域之一上拖放，则可拖动性被禁用(例如，如果用户无意中释放了鼠标左键)。在所有其他情况下，拖放工作如预期:克隆被创建，并可用于拖放到任何指定的拖放区域。我试着将"disabled: false"设置为可拖拽，但没有帮助。

2)每个"dropContainer"只能接受/允许一个答案(例如，droptarget_m_1_1_a应该只接受一个答案，无论答案是正确的还是错误的)。我试图通过关联数组(链接dropContainer和特定drop元素的id)提供一个更具体的名称，没有运气。我可以硬编码它来禁用一个特定的类，即$(". droptarget_m_1_1_a "). dropable ("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>

首先应该查看创建的克隆。在«mouseup»事件发生后，在不是用于放置的区域中，克隆将移动到原始可放置元素所在的位置。

克隆是阻止你的元素被点击的东西。实际上，您单击的是克隆，而不是可放元素

所以我建议你将克隆附加到可放元素上也就是移动这些行

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

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

第二个问题可以在同一个处理程序中解决，您应该添加像这样的内容

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

。

这一行将禁用父容器中所有可放元素

jQuery拖放 - 拖放到指定放置区域之外后不启用可拖动，并在拖放完成后禁用指定区域

相关内容

最新更新

热门标签：