Reputation: 916
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/
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
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/
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