I've just started using jQuery UI to drag divs into a columns in a table. I have a couple different draggable divs with different background-colors and text inside them, and I need them to be able to dragged up to the drop area as a clone. This worked fine by using jQuery UI's example shopping cart code, but I've edited it so the whole object is dragged instead of just the text, but this then eliminates the clone functionality for some reason, even though I have helper:clone.
Here is my code:
<script>
$(function() {
$( "ul li" ).draggable({
appendTo: "body",
helper: "clone"});
$( ".day #drag" ).draggable({
appendTo: "body"});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "ui-state-highlight" );
$( ui.draggable ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
Example column:
<td>
<div id="monday" class="day monday ui-widget-content"></div>
</td>
Draggable element:
<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>
It's essentially a timetable setup tool. Thank you for the help
Here is a jsFiddle for reference: http://jsfiddle.net/x5T4h/
Not sure that it is exactly what you want, but here is a good start for your : http://jsfiddle.net/x5T4h/2/
Basically, I removed the second draggable object declaration, and I added clone function to duplicate your element inside drop event $( ui.draggable ).clone().appendTo( this );
$(function() {
$( "ul li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( ui.draggable ).clone().appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
Related
I'm working on an old project that uses the following code as a base for an autocomplete text field: https://jqueryui.com/autocomplete/#categories
$( function() {
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
I would like to add the "appendTo" option to this widget but can't work out the correct syntax from the API documentation:
Initialize the autocomplete with the appendTo option specified:
$( ".selector" ).autocomplete({
appendTo: "#someElem"
});
Get or set the appendTo option, after initialization:
// Getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
// Setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
How do I add this option to a jQuery UI autocomplete widget?
You seemed to miss the end of the example source script (in your documentation link). It activates the autocomplete with:
$( "#search" ).catcomplete({
delay: 0,
source: data
});
To use the appendTo, then is as simple as:
$( "#search" ).catcomplete({
delay: 0,
source: data,
appendTo: '#someElem'
});
where you are appending to a selection $('#someElem')
I am using JQuery UI for drag and drop in my project.
On the draggable element, I have Bootstrap (3.x) tooltip.
Moving the mouse over the draggable shows the tooltip.
I hope to remove/hide tooltip on the draggable clone when drag starts. I goolged and tested, but to no success.
Here is jsfiddle setup of the whole thing. Link: http://jsfiddle.net/mddc/6md9h/18/
<div id="draggable" class="ui-widget-content">
<div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts.">Drag me</div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
Here is javascript code:
$(function() {
$( "#draggable" ).draggable({
start: function(event, ui) {
//this is what I hope to work, but not working!
$(ui.helper).find('[data-toggle="tooltip"]').tooltip('hide');
},
helper: 'clone',
revert: "invalid"
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$('[data-toggle="tooltip"]').tooltip({
'animation': true,
'placement': 'bottom'
});
});
Thanks for any help!
You can hide you tooltip child element.
Code:
$( "#draggable" ).draggable({
start: function(event, ui) {
$(ui.helper).find('.tooltip').hide();
},
helper: 'clone',
revert: "invalid"
});
Demo: http://jsfiddle.net/9RwHh/
Why not just use
start: function(ev, ui){
$('.tooltip').remove();
}
At one point there will be only one element with "tooltip" class available in the document. So it should be a safe bet to just remove it.
I'm trying to create a situation where it is possible to drag and clone a div inside another div multiple times, this div in the specific container has tot be sortable with the other ones.
$(function() {
$( ".drag" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day " ).droppable({
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "" );
if($(ui.draggable).hasClass('draggable-source'))
$( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
else
$( ui.draggable ).appendTo( this );
console.log(this.id)
}
}).sortable({
items: "div",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
This is working in this fiddle:
http://jsfiddle.net/mfUCe/
This is where i got stuck:
I want to be able to drag the 2 divs in to the divs that are already inside of the droppable containers.
it would be great if anybody could help me
I'm beginer to js and jquery and I need a little help if someone can help me...
What I want to do?
I want to drag div from sidebar to table. In sidebar div must be only draggable to table. When I drag div to table, there in table, div must be resizable and draggable again.
Photo:
I was try with this code but dont work well:
$(function() {
$( ".draggable" ).resizable();
$( ".draggable" ).draggable({revert: 'invalid', helper:'clone', snap: "#drop_here td", opacity: 0.7});
$( "#drop_here td" ).droppable({
accept: '.draggable',
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped!" );
}
});
});
DEMO and SOURCE code: http://jsbin.com/erofot/17/edit | http://jsbin.com/erofot/17
Here is how you could do it then: (replace what you have in jsbin with this code)
jsbin
$(function() {
//$( ".draggable" ).resizable();
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7
});
$( "#drop_here td" ).droppable({
// accept only from left div,
// this is necessary to prevent clones duplicating inside droppable
accept: '#left .draggable',
drop: function( event, ui ) {
// 4 append clone to droppable
$( this ).append(
// 1 clone draggable helper
$(ui.helper).clone()
// 2 make the clone draggable
.draggable({containment:"parent"})
// 3 make the clone resizable
.resizable());
}
});
});
Here I have a code:
<script>
$(function() {
$( "#photo" ).resizable();
$( "#photo" ).draggable({revert: 'invalid'});
$( "#left" ).droppable({
accept: '#photo',
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
and this code I must run after full loading google maps, so I need to "hook up" tilesloaded event for this code.
http://jsbin.com/ayugun/7/edit
But how to do that?
Here is the code
google.maps.event.addListener(map, 'tilesloaded', function() {
doWhatYouWant();
});