jQuery的拖放 - 拖动后降外指定拖放区域未启用＆下降后禁用指定区域完成

我需要2个问题帮助：jQuery的拖放 - 拖动后降外指定拖放区域未启用＆下降后禁用指定区域完成

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

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

非常感谢您提前！

这是我到目前为止有：

<!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>

来源

2015-09-27 LearnForever

你应该看看的第一件事就是创建一个克隆。在不是用于放弃克隆区的区域中的“mouseup”事件正在原始可放弃元素所在的位置移动。

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

因此，我建议你到克隆重视，这意味着这些线路

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

移动到«下降»事件可放开元素处理器的可丢弃元素而不是可拖动的。因此，只有当可拖动元素被放入三个容器中的一个时，才会创建一个克隆。考虑到你将需要修改你的CSS来显示克隆。

第二个问题我会在相同的处理解决，你应该把类似

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

那里。

这条线将禁用一个父容器中的所有元素可放开

来源

2015-09-28 05:16:45

我为delay.Thank你这么多，瓦西里表示歉意！伟大的解决方案，就在上面。 – LearnForever

非常欢迎您！ –

jQuery的拖放 - 拖动后降外指定拖放区域未启用＆下降后禁用指定区域完成

回答

相关问题