jQuery draggable：只能在一个droppable上拖动

Question

I have an app with some droppable and draggable, and I want to do for one type of draggable (with a given class) this draggable can be drop only on one type of droppable.

The problem is that it's depending of the class, at the beggining the draggable can be drag everywhere in my grid :

 $('.grid-drop').droppable({
        accept: '.block',
        hoverClass: 'hovered',
        drop: handlePublishBlock
 });

So what I do is when I start to drag my element I change the accept of my grid like this :

$('.grid-drop').droppable({
       accept: '.unknown-class',
       hoverClass: 'hovered',
       drop: handlePublishBlock
});

But it seems doesn't work, I still can drag my elem on the grid-drop.

What I want to do is that the element with this class can be drag only to one drop and after this it can't be drag another time, so here is my actual code :

 $(".draggable-one")
        .mousedown(function() {
            $('.grid-drop').droppable({
                accept: '.unknown-class',
                hoverClass: 'hovered',
                drop: handlePublishBlock
            });

            console.log("mousedown");
            isDragging = false;
        })
        .mousemove(function() {
            console.log("mousemove");
            isDragging = true;
        })
        .mouseup(function() {
            console.log("mouseup");
            var wasDragging = isDragging;
            isDragging = false;
            if (wasDragging) {

                $('.grid-drop').droppable({
                    accept: '.block',
                    hoverClass: 'hovered',
                    drop: handlePublishBlock
                });


                $(this).draggable('disable');
                $(this).removeClass('block-draggable');
            }
        });

When I start to drag I disable the drop on my grid (but seems not work) and when I drop on the other field than the grid (there is only one other field) the element can't be drag another time. This works but the disable and re-enable of the grid doesn't works.

Can anyone help me ? Thanks.

Answer 1

Without seeing your full code, it's hard to help. I would advise something like this:

$(function(){
  var $grid = $('.grid-drop').droppable({
    accept: '.block',
    hoverClass: 'hovered',
    drop: handlePublishBlock
  });
  var isDragging = false;
  $(".draggable-one").draggable({
    start: function(e, ui){
      $grid.droppable("option", "accept", ".draggable-one");
      console.log(e.type);
      isDragging = true;
    },
    stop: function(e, ui){
      $grid.droppable("option", "accept", ".block");
      console.log(e.type);
      isDragging = false;
    }
  });
});