I would like to trigger an event when I am leaving the droppable element, so I plan to use the out function. But I have two droppable elements. When I wrote the code for one element it works but not for two.
Html :
<div id="source">
<item1>
...
<itemx>
</div>
<div id="drop1"></div>
<div id="drop2"></div>
Jquery:
$("div#drop1, div#drop2").droppable ({
drop : function (event, ui) {
$(this).append (ui.draggable);
alert("Hello!");
},
out : function (event, ui) {
alert("Goodbye");
},
});
But the Out function doesn't trigger ? I could write it twice but if I have 20 droppable elements, it's not the solution.
Any ideas ?
Thanks !
you have an error on line 9 ... but its working for me without this... check this fiddle:
http://jsfiddle.net/yCeL3/
Related
fellows! I'm doing some frontend work using doT.js for generating content and jquery-ui for displaying tooltips.
{{##def.defboardtooltip:
<div class='tooltip'>
<!-- some html code -->
<a id='bdetails' href='#'>Click for details</a></div>
</div>
#}}
And how it is used:
<div class="participant" title="{{#def.defboardtooltip}}">
I'm trying to add the event to the a element with jquery as such ():
$(document).ready(function () {
// ...enter code here
$('#bdetails').click(function (e) {
// some code
console.log('fired');
});
});
And I never see the "fired". I'm confused.
jQuery Event delegates are your friend here.
Try:
$(function()
{
$(document).on('click', '#bdetails', function(e)
{
var a = $(this);
});
});
This will filter the event to just your #bdetails element, you can use any valid jQuery seletor here also; e.g., 'a' to delegate all anchor tag clicks.
I am using JQuery UI's drag and drop for a web application.
I have the following HTML structure:
<div id="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
and Javscript:
$('#list').sortable({containment: 'parent'});
When I drag, move, and drop an item, all items are aligned nicely verticially, which I like it.
Now I hope that when I drag and hover an item over another item, the item below can show some visual effects similar to the hoverClass available in JQuery UI's Droppable.
How can I do it?
Thanks and regards!
For the hoverClass you can do something simiar with the over and out methods. The start and stop could also help you.
$('.sortable').sortable({
over : function(){
$(this).addClass('valid');
},
out : function(){
$(this).removeClass('valid');
}
});
As stated before, $(this) points to the current sortable you are hovering on a over typed event.
The most reliable way of implementing sortable hovering with jQuery is as follow:
$('#some-element').sortable({
start: {
ui.item.parent().addClass('sortable-hover');
},
over: {
$('.sortable-hover').removeClass('sortable-hover');
$(this).addClass('sortable-hover');
},
stop: {
ui.item.parent().removeClass('sortable-hover');
}
});
You can add more logic as required.
Hope it helps,
-- José
I hope that's what you are looking for
$('#list').sortable({
containment: 'parent',
start: function() {
$(this).addClass('sortable-hover');
},
over: function() {
$('#list').removeClass('sortable-hover');
$(this).addClass('sortable-hover');
},
stop: function) {
$('#list').removeClass('sortable-hover');
},
});
So I have a jQuery UI dialog with some buttons inside (full example here => http://jsfiddle.net/VLr5G/3/):
<div id="test">
<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
</div>
What I want to do is force the focus on the "Close" button - I have tried applying the following code when the dialog opens:
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
Unfortunately the focus always keeps getting on the first button inside the dialog. Is this a bug, or am I missing something ?
Thanks a lot in advance for your help !
UPDATE
Okay so the answer from Stanley works fine with my first example... But try to change the version of jQuery UI => http://jsfiddle.net/VLr5G/10/
From what I could find so far, it worked until jQuery UI 1.10.0.
You are not getting the close button correctly.
You should do this instead:
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
open: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
Working jsfiddle: http://jsfiddle.net/GG7EP/2/
UPDATE
To make it work with jQuery 1.10.0 or above, call the button's focus function in focus event
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
focus: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
JsFiddle: http://jsfiddle.net/V3P4t/
I have 2 lists with items, I add UI sortable to it.
How can I select and do some fun with just moved element?
When I'm trying this code - it add a class to all elements from first UL, but I need to add this class to just moved element to second UL.
<ul class="moveMe" id="ul1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="moveMe" id="ul2">
<li></li>
</ul>
<script>
$(".moveMe").sortable({
connectWith: ".moveMe",
stop: function (event, ui) {
$('li', this).addClass('justMoved');
}
}).disableSelection();
</script>
Thanks!
Just use ui.item instead of this.
$(".moveMe").sortable({
connectWith: ".moveMe",
stop: function (event, ui) {
ui.item.addClass('justMoved');
}
}).disableSelection();
See this jsfiddle
And the corresponding doc entry.
ui
item
Type: jQuery
The jQuery object representing the current dragged element
I'm looking to use jQuery UI Sortable + Draggable + Droppable with the same items. I'd like to sort all .item elements and be able to drag and drop an .item into another. Below is my code:
<script>
$(function() {
$("#wrapper").sortable({
items: ".item",
stop: function(event, ui) {
// save new sort order
}
});
$(".item").draggable({
helper: ".clone",
connectToSortable: "#wrapper"
}).disableSelection().droppable({
accept: ".slide",
drop: function(event, ui) {
// dropping .item into another .item
}
});
});
</script>
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
When I use sortable + draggable + droppable, only one or the other works not all of them together. What am I missing to achieve this?
Thanks!
I'm not sure I entire understand what you are trying to say. If you are just trying to sort the items in your list with drag and drop, you don't need the .draggable and .droppable.
http://jsfiddle.net/Earendil/saQwr/
If you are trying to drop one item element into another, let me know and I'll see if I can get that working and post an updated fiddle for it.