CODEWITHSUNDEEP
jqueryjquery-uidraggablejquery-ui-draggablejquery-ui-droppable
MP_Webby
MP_Webby

Reputation: 916

jQuery UI nested droppables - make draggable a droppable

I want to be able to drag a draggable into a droppable. Then, when I drag in another draggable prevent the user from dropping it on the previously dropped draggable, but still drop it on the droppable. That is such a ridiculous sentence I've added an image to illustrate below and a jsfiddle of what I've tried so far here: http://jsfiddle.net/u4pAf/6/

detect if draggable is being placed over a dropped draggable

Below is the code on jsfiddle. Just a demo to try and get something working. I though the best approach to detecting if a draggable is over a dropped draggable is to make the draggables droppables too, and set the accept parameter to false, so it accepts nothing.

css:

.draggable-elem { background:red }
.drag1 {width: 100px; height: 40px;}
.drag2 {width: 150px; height: 80px;    margin-top:10px;}


.boundary_active{
    outline: solid 12px darkviolet;
}
.boundary{
    background:cyan; 
    position:relative;
    width:200px;
    height:200px;
    margin-top:50px;
    margin-left:10px;
}

html:

<div class="boundary">  
    <p>droppable</p>
</div>

<div class="draggable-elem drag1">1</div>
<div class="draggable-elem drag2">2</div>

jQuery:

 jQuery('.boundary').droppable({        
    over : function( event, ui ) { 
        jQuery(ui.helper).css('background', 'blue').text('OVER DROPPABLE'); 
    },
    out : function( event, ui ) { 
         jQuery(ui.helper).css('background', 'red').text('draggable');    
    },
    drop : function(ev, ui) {    
          this_clone = jQuery(ui.helper).clone(false)
          .css({position:'absolute', left:0, top:0})
          .removeClass('ui-draggable')
          .removeClass('ui-draggable-dragging')
          .removeClass('draggable-elem')
          .addClass('droppable-elem')
          .addClass('ui-droppable');
          jQuery('.boundary').append(this_clone);//append to boundary
    },
    accept : '.draggable-elem',
    activeClass : 'boundary_active',
    tolerance : 'fit'
});

jQuery( '.draggable-elem' ).draggable({
    helper : 'clone',
});

jQuery('.dropped-elem').droppable({
    greedy : true,
    over : function( event, ui ) { 
        jQuery(ui.helper).css('background', 'yellow').text('OVER DRAGGABLE'); 
    },
    accept : '.none',
    tolerance: 'touch',
    activeClass : 'boundary_active',
});

Upvotes: 2

Views: 2278

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can use tolerance option:

Specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values:

  • "fit": Draggable overlaps the droppable entirely.
  • "intersect": Draggable overlaps the droppable at least 50% in both directions.
  • "pointer": Mouse pointer overlaps the droppable.
  • "touch": Draggable overlaps the droppable any amount.

in your case you can use touch.

Demo: http://jsfiddle.net/6eGGT/

UPDATE

You have to setup the cloned element as droppable, by using droppable on it, check out the accept selector that now not select anything (.none selector).

Demo: http://jsfiddle.net/PmjW6/

Upvotes: 0

Related Questions