How to hide dragged item while cloning it
$( ".selector" ).draggable({
helper: "clone"
});
I want to hide cloned item while dragging
The CSS class for the helper is ui-draggable-helper
You can use CSS to hide it:
.ui-draggable-helper
{
display:none;
}
Related
I have a sortable and droppable list, and also a separate set of draggables:
ul.sortable
li.droppable
li.droppable
li.droppable
/ul
ul
li.draggable
li.draggable
li.draggable
/ul
I apply a hover class on the droppables:
$(".droppable").droppable({ hoverClass: "hover" });
The hover is supposed to be a visual cue for the user, telling him that a draggable can be dropped onto a droppable.
The problem is that the hover class is also applied when a droppable is hovered by a sortable element as well. The visual cue is, in this case, totally wrong.
Here's a fiddle illustrating the issue (drag the draggables over the sortables, reorder the sortables): http://jsfiddle.net/TWXeH/
How do I make the hover class work only when there's a draggable over a droppable, but not with sortables?
You're looking for the accept option
$(".droppable").droppable({
hoverClass: "hover",
accept: ".draggable"
});
I am using jqueryui's draggable and sortable functionalities. My jqueryui version is 1.9.1 and jquery version is 1.7.1
I have a set of items that I make draggable, and a container that is sortable. I drag the draggable items to the sortable container, and want to read the draggable item's id attribute in the sortable's stop handler. However, the id turns out to be undefiend there.
$(sortableselector).sortable({
stop: function(event, ui) {
alert(ui.item.attr('id'));
}
});
$(draggableselector).draggable({
revert: true,
revertDuration: 0,
connectToSortable: 'sortableselector',
});
prints undefined. I've seen several posts pointing this bug, but non has been resolved. How can I get the dragged item's id there?
Try...
$(sortableselector).sortable({
stop: function(event, ui) {
alert(ui.item[0].id);
}
});
I'm using jQuery tabs. In one of the tabs is a wysiwyg editor that needs to be refreshed after the tab is displayed, but I can't figure out if there is an event that fires after the tab is loaded.
From my understanding, the load event is only for tabs that use ajax calls. I've tried using it but it doesn't fire:
jQuery ui tabs load/tabsload event does not fire
In that example they use an iframe, which has a load event that is triggered. I'm just using divs, which don't have a load event, and nothing like an onshow event listener.
The closest I've been able to get is the tabsselect event which fires when a tab is clicked, but before the new tab is loaded.
Is there any event that fires after the tab is loaded when I'm not using ajax?
Thanks
Did you try event-show?
http://jqueryui.com/demos/tabs/#event-show
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
The show event did not work for me, but the create event did:
$( ".selector" ).tabs({
create: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-create
Now the event is called activate
$( ".selector" ).tabs({
activate: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-activate
suppose I have a panel with draggable element,
and a droppable container,when I drag the element into container,
<div id="panel">
<div class="square"></div>
</div>
<div id="canvas"></div>
I want clone the draggable element,but the issue is ,the reltive position info could be copy,too
So how can I just let the clone one stay at the mouse stay position?,here is my code
$('.square').draggable({
revert:"valid"
});
$('#canvas').droppable({
drop: function (e, ui) {
$(ui.draggable).clone().appendTo($(this));
}
})
here is example http://jsfiddle.net/AN5gt/
I would suggest to remove the revert to make the animation more realistic.
$('.square').draggable({
helper:"clone"
});
$('#canvas').droppable({
drop: function(e, ui){
$(ui.draggable).clone().appendTo($(this));
}
})
Well, first I would like to thank you for asking this question, and it solved one of my own question.
I want to make link of physical file listed in a folder tree. ie for picture gallery, i am showing complete folder tree list, and want the admin to drag the image and put in the gallery.
Here what I have done.
$('.square').draggable({
revert:"valid",
helper:"clone"
});
$('#canvas').droppable({
drop: function (e, ui) {
$(ui.draggable).clone().appendTo($(this));
}
})
I need a function which will get the text of the currently selected tab. I can get the selected tab using events, but I need to get the text even if the selected event is not yet thrown.
Here's my event script,
$( "#tabs" ).bind( "tabsselect", function(event, ui) {
_textOfTab=$(ui.tab).text();
});
How can I just query the tabs for the currently selected one?
The <li> of the selected tab will have a ui-tabs-selected class on it, you can use that to find the active tab.
$("#tabs ul.ui-tabs-nav li.ui-tabs-selected").text()
You can test it out here.