jQuery Draggable et droppable empêchent l'événement ondrop quand sur d'autres draggable

J'ai 3 draggable, divs bleus et 1 div droppable rouge. Je veux déclencher un événement drop quand je fais glisser un div bleu sur un rouge et en même temps l'endroit qu'il prend est "libre", il n'y a pas d'autre div rouge dans cette zone. Les écrans seront mieux pour le décrire:jQuery Draggable et droppable empêchent l'événement ondrop quand sur d'autres draggable

sur Déclenchée goutte: triggered

ne se déclenche pas sur une chute: not-triggered

Je n'ai pas idée comment atteindre cet objectif.

Mon code:

\t $(document).ready(function(){ 
 
    \t $(".draggable").draggable({ 
 
    \t \t drag: function(event,ui){ 
 
    \t \t \t \t $(this).css("opacity", .5) 
 
    \t \t } 
 
    \t }); 
 
    \t $('#droppable').droppable({ 
 
    \t \t accept: ".draggable", 
 
    \t \t tolerance: 'pointer', 
 
    \t \t drop: function(event,ui){ 
 
    \t \t alert("dropped"); 
 
    \t \t } 
 
    \t }); 
 
    });

\t div { 
 
    \t \t margin: 5px; 
 
    \t } 
 
    .draggable { 
 
    \t \t width:100px; 
 
    \t \t height: 100px; 
 
    \t \t background-color: blue; 
 
    } 
 
    #droppable { 
 
    \t \t width: 400px; 
 
    \t \t height: 400px; 
 
    \t \t background-color: red; 
 
    }

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    \t <head> 
 
    \t \t <title>Bootstrap Example</title> 
 
    \t \t <meta charset="utf-8"> 
 
    \t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    \t \t <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    \t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    \t \t <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
     
 
    
 
    \t </head> 
 
    \t <body> 
 
    \t \t <div class="container"> 
 
    \t \t \t <div class="row"> 
 
    \t \t \t \t <div class="col-md-10 col-md-offset-2"> 
 
    \t \t \t \t \t <div class="draggable"></div> 
 
    \t \t \t \t \t <div class="draggable"></div> 
 
    \t \t \t \t \t <div class="draggable"></div> 
 
    \t \t \t \t \t <div id="droppable"></div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

Source

2017-08-31 Mark

quand je dorped div bleu en rouge, il produit l'événement de baisse, ce que vous voulez –

Je veux éviter la production d'événement drop lorsque le pointeur est sur un autre bleu div. C'EST À DIRE. Je laisse tomber 1 div bleu et je veux en lâcher un autre, je veux qu'il soit possible seulement sur l'espace "libre" de div rouge. – Mark

Vous pouvez utiliser une variable pour stocker si elle est libre de laisser tomber et changer cette variable lorsque vous faites glisser les divs bleu sur l'autre.

$(document).ready(function(){ 
    var isFreeToDrop = true; 

    $(".draggable").draggable({ 
     drag: function(event,ui){ 
       $(this).css("opacity", .5) 
     } 
    }); 

     $(".draggable").droppable({ 
      tolerance: 'touch', 
     over: function(event,ui){ 
      isFreeToDrop = false; 
     }, 
     out: function(event,ui){ 
      isFreeToDrop = true; 
     }, 

    }); 

    $('#droppable').droppable({ 
     accept: ".draggable", 
     tolerance: 'pointer', 
     drop: function(event,ui){ 
      if(isFreeToDrop){ 
       alert("dropped"); 
      } 

     } 
    }); 
});

Voici la version de travail sur JSBin: https://jsbin.com/donusajoba/edit?html,css,js,output

Source

2017-08-31 09:23:12

jQuery Draggable et droppable empêchent l'événement ondrop quand sur d'autres draggable

Répondre

Questions connexes