jquery拖放 - 拖放到指定拖放区域外后不启用可拖动并在拖放完成后禁用指定区域答案

【问题标题】：jquery drag drop - draggable is not enabled after drop outside designated drop areas & disabling designated areas after drop is completedjquery拖放 - 拖放到指定拖放区域外后不启用可拖动并在拖放完成后禁用指定区域
【发布时间】：2015-09-27 17:41:26
【问题描述】：

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

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

2) 每个“dropContainer”应该只接受/允许一个答案（例如，.dropTarget_m_1_1_a 应该只接受一个drop，无论答案是正确还是错误）。我试图通过关联数组（链接 dropContainer 和特定放置元素的 id）提供更具体的名称，但没有成功。我可以对其进行硬编码以禁用特定类，即 $(".dropTarget_m_1_1_a").droppable("disable");不幸的是，我需要迭代，例如遍历每个 .dropTargetxxxxxx 类或每个 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>

【问题讨论】：

标签： jquery jquery-ui drag-and-drop draggable droppable

【解决方案1】：

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

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

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

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

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

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

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

那里。

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

【讨论】：

抱歉耽搁了。非常感谢你，瓦西里！！！很好的解决方案，就在眼前。