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

拖拽元素复位技巧

最新推荐文章于 2021-03-04 11:58:24 发布

likaiwalkman_Victor

最新推荐文章于 2021-03-04 11:58:24 发布

阅读量1.1k

点赞数

本文探讨了如何在使用jQuery UI实现拖拽功能时，根据不同条件使被拖拽的元素复位。具体介绍了如何设置小盒子作为贪婪的放置区域，并在特定条件下取消拖动操作。

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?

asked May 20 '11 at 11:43

Logan
1,082 1 9 21

	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. – Logan May 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 Francis May 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? – Logan May 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 vote 21 down vote accepted

Your thinking was correct, you have to make the small boxes greedy droppables and handle the dropevent 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 resetrevert:'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);
    }
});