Response title
This is preview!
Move this topic
Out event in droppable is not firing..................
in Using jQuery UI
•
6 months ago
hi all................
i have a problem the out event is not firing properly any help would be appriciated.thanks
$(function () {
$("#draggable").draggable({revert:"invalid"});
$("#droppable").droppable({
tolerance: 'touch',
hoverClass: "ui-state-active",
drop: function (event, ui) {
alert("Dropped!");
$(ui.draggable).draggable( 'option', 'disabled', false );
$(this).droppable("disable");
$(this).addClass("ui-state-highlight")
.find("p")
.html("arranged");
},
out :function(){
alert("out");
}
});
1
Replies(7)
Hi. Please will you show the related static html. It could be something to do with its layout.
Regards,
Alan
Leave a comment on alano999's reply
sure this is my entire code...............<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Visual feedback</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2, #draggable3, #draggable4 { width: 100px; height: 100px; padding: 0.0em; float: right; margin: 10px 10px 10px 0; clear : left;}
#droppable, #droppable2, #droppable3, #droppable4 { width: 100px; height: 100px; padding: 0.0em; float: left; margin: 0px; }
h3 { clear: left; }
</style>
<script>
$(function () {
$("#draggable").draggable({revert:"invalid"});
$("#droppable").droppable({
tolerance: 'touch',
hoverClass: "ui-state-active",
drop: function (event, ui) {
alert("Dropped!");
$(ui.draggable).draggable( 'option', 'disabled', false );
$(this).droppable("disable");
$(this).addClass("ui-state-highlight")
.find("p")
.html("arranged");
},
out: function(ev, ui) {
$(this).droppable("enable");
}
});
$("#draggable2").draggable({revert:"invalid"})
$("#droppable2").droppable({
tolerance: 'touch',
activeClass: "ui-state-hover",
drop: function (event, ui) {
alert("Dropped!");
$(ui.draggable).draggable( 'option', 'disabled', false );
$(this).droppable("disable");
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("arranged!");
}
});
$("#draggable3").draggable({revert:"invalid"});
$("#droppable3").droppable({
tolerance: 'touch',
hoverClass: "ui-state-active",
drop: function (event, ui) {
alert("Dropped!");
$(ui.draggable).draggable( 'option', 'disabled', false );
$(this).droppable("disable");
$(this).dropeable("disable")
.addClass("ui-state-highlight")
.find("p")
.html("arranged");
}
});
$("#draggable4").draggable({revert:"invalid"});
$("#droppable4").droppable({
tolerance: 'touch',
hoverClass: "ui-state-active",
drop: function (event, ui) {
alert("Dropped!");
$(ui.draggable).draggable( 'option', 'disabled', false );
$(this).droppable("disable");
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("arrranged");
}
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0"
style="z-index: 1; left: 653px; top: 11px; position: reletive; height: 556px; width: 120px">
<tr><td><div id="droppable" class="ui-widget-header"><p>1</p></div></td>
</tr>
<tr>
<td><div id="droppable2" class="ui-widget-header">
<p>Drop here</p>
</div>
</td>
</tr>
<tr><td><div id="droppable3" class="ui-widget-header"><p>3</p></div></td>
</tr>
<tr>
<td><div id="droppable4" class="ui-widget-header">
<p>Drop here</p>
</div>
</td>
</tr>
</table>
<div id="draggable" class="ui-widget-content" clear: both><p><img src=images/server1.jpg height=100 width=100></img></p></div>
<div id="draggable3" class="ui-widget-content"><p><img src=images/server2.jpg height=100 width=100></img></p></div>
<div id="draggable4" class="ui-widget-content">
<p><img src="images/server3.jpg" height=100 width=100></img></p>
</div>
<div id="draggable2" class="ui-widget-content">
<p><img src="server4.jpg" height=100 width=100></img></p>
</div>
</body>
</html>
Leave a comment on santoshauce's reply
Hi.
How about the code I have written on jsfiddle for you, with editable source code and executable... http://jsfiddle.net/alano/drgSu/
For easy programmability, my code uses config definition variables for the draggables and droppables, and one single code block to define all of them and their behaviours. Apologies for the poor layout on jsfiddle, the styling doesn't seem to be as expected.
I think the "erraticness" of "out" that you were experiencing might be due to a misunderstanding of what "out" does. Note carefully that it is an event for droppable not draggable. This means it detects when something is moved out of a droppable box; it does not detect when a particular draggable is moved out of the droppable boxes.
For example, if you have dropped draggable #2 into droppable #2, and the draggable item sits across droppable boxes #2 and #3; if you put your mouse over draggable #2 but in the region of droppable #3 then start dragging droppable box #2 away, you will get an "out" event from droppable #3 NOT 2; because the event relates to the draggable not the droppable.
You can tweak the behaviour of "out" in a number of ways. In my code I have optimised it by initially setting the droppable tolerance to "pointer", for accuracy when first dropping a draggable; then once the drop has taken place, the tolerance is switched to "touch". This means that, in nearly all cases, the "out" should behave as you wish (although I can only guess what exactly you wish it to do).
Let me know whether this now does what you wish. If not, what exactly do you wish to happen? I don't know, for example, what is the overall purpose of this drag'n'drop. jQueryUI drag'n'drop behaviour is so flexible, including easy sorting, that it can be made to do just about anything.
Best wishes,
Alan
Leave a comment on alano999's reply
hi alan.................thanks for your reply.it not worked for me.exactly what i am trying to do is i want to enable previously disabled the DROPPABLE when the DRAGGABLE moved out from the DROPPABLE. but when i am trying to enable in "out " event its not working.is there any alternative for this requirement .i am unable to achieve it .please suggest any alternations.
once again thanks for ur reply.gr8 work
Leave a comment on santoshauce's reply
It would help immensely if you could describe the exact desired full lifecycle of the draggable items, including all permutations of eventualities. From the information you have provided so far I am unable to advise you further. I look forward to helping you. Regards, Alan
Leave a comment on alano999's reply
hi alan thanx for your reply. my requirement is the DROPPABLE would revert the DRAGGABLE if already any draggable existed in droppable. the draggables are inter changeable among DROPPABLES. the DROPPABLE will accept the DRAGGABLE when no items in it.i think do u understand.
again thanx bro......................
Leave a comment on santoshauce's reply
i think its not possible in jquery thanks
Leave a comment on santoshauce's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to santoshauce's question
Statistics
- 7 Replies
- 1059 Views
- 1 Followers
