您的位置：首页 > 其它

Draggable revert if outside this div and inside of other draggables (using both invalid and valid re

2013-08-29 18:08 676 查看

On ui draggables ( http://jqueryui.com/demos/droppable/#revert )
is it possible to revert a div if its inside one div and if not inside another one? for example like this

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" });

but that wouldn't work because of obvious reasons.. can I condition that though?.. for when its inside this droppable and not inside of that droppable?

jquery jquery-ui drag-and-drop draggable jquery-ui-draggable

share|improve
this question

asked May 20 '11 at 11:43

Logan

1,0821921

	Are the 'valid' and 'invalid' divs somehow nested? Because otherwise, surely it couldn't be in both divs simultaneously... :) – Chris Francis May 20 '11 at 11:50
	imagine a big box, and there are small boxes inside them. the small boxes are draggable and if i take them outside the big box they get reverted back, if i take them on to another small box it should also get reverted- but that's the part i can't do. I've tried making all the small boxes another droppable but since they are also inside the big box, it registers as valid so no revert occurs. Also tried greedy, which I couldn't make it work. – LoganMay 20 '11 at 11:58
	Assuming the revert attribute can take any selector, could you use something like revert: ".outside, .valid > div.invalid" ? Assuming the element that wraps 'valid' has a class of outside . – Chris FrancisMay 20 '11 at 12:06
	actually its either true or false (valid or invalid) so i guess there's no way of doing that like that. Do you know if there's a way around excluding the small boxes' area from the big box'es area and calling that valid? – LoganMay 20 '11 at 12:15
	Ah, I'm afraid not... Never actually used droppables! :) – Chris Francis May 20 '11 at 12:17

1 Answer

active oldest votes

up
vote21down
voteaccepted

Your thinking was correct, you have to make the small boxes greedy droppables and handle the

drop

event
on them. The tricky part is to cancel the drag operation.

By default, your draggables should start as

revert:'invalid'

.
You don't have to do anything if they are dragged inside the big box, which in my example uses

tolerance:'fit'

,
so the small boxes must be completely inside to be accepted.

I have made the small boxes greedy droppables with

tolerance:'touch'

,
so if the dragged small box touches another small box, it will call the

drag

handler
on it.

To cancel the drag operation from a drag handler, you can do a workaround of setting the dragged item to

revert:true

,
which forces it to revert even though it was dropped on an accepting droppable. To make sure you can drag that small box again, on its drag stop event you have to reset

revert:'invalid'

.
The

stop

event
will fire on every successful drop and if it's reverting, it will fireafter reverting has completed.

You can try out a live demo here: http://jsfiddle.net/htWV3/1/

HTML:

<div class="drop">
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
</div>

CSS:

.drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }

.drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; }

Javascript:

$('.drop').droppable({
tolerance: 'fit'
});

$('.drag').draggable({
revert: 'invalid',
stop: function(){
$(this).draggable('option','revert','invalid');
}
});

$('.drag').droppable({
greedy: true,
tolerance: 'touch',
drop: function(event,ui){
ui.draggable.draggable('option','revert',true);
}
});

share|improve
this answer

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航