jquery 拖放 - 拖放到指定拖放区域外后不启用拖放，拖放完成后禁用指定区域

Question

我需要帮助解决 2 个问题：

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

2) 每个 "dropContainer" 只有一个答案应该是 accepted/allowed（例如 .dropTarget_m_1_1_a 应该只接受一滴，不管答案是对还是错）。我试图通过关联数组（链接 dropContainer 和特定 drop 元素的 id）提供更具体的名称，但没有成功。我可以对其进行硬编码以禁用特定的 class 即 $(".dropTarget_m_1_1_a").droppable("disable");不幸的是我需要迭代，例如遍历每个 .dropTargetxxxxx class 或每个 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» 事件之后，克隆正在移动到原始可放置元素所在的位置。

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

所以我建议您将克隆附加到可放置元素，这意味着移动这些行

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

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

我可能会在同一个处理程序中解决第二个问题，你应该输入类似

的内容

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

那里。

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

jquery 拖放 - 拖放到指定拖放区域外后不启用拖放，拖放完成后禁用指定区域

jquery drag drop - draggable is not enabled after drop outside designated drop areas & disabling designated areas after drop is completed

jquery

drag-and-drop

jquery-ui

droppable

draggable