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
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 have a page with a side panel that swipes open. I would like the scroll position to remain in the same place, when this panel is swiped open. Currently, it snaps to the top. My below code is not working. Any advice?
var storePosition = {
topCoordinate : null
}
$(document).ready(function(){
/////////////////////// JQUERY MOBILE SWIPING (Scroll position) //////////////////////
$( "#B" ).panel({
beforeopen: function( event ) {
storePosition.topCoordinate = $(this).offset().top;
$( "body [data-role=page]" ).css("position","fixed");
}
});
$( "#B" ).panel({
beforeclose: function( event ) {
$( "body [data-role=page]" ).css("position","");
if($.mobile.activePage.attr("id") == "page" && storePosition.topCoordinate !== 0){
$('html, body').animate({
scrollTop: $("#A").position().top += storePosition.topCoordinate - 60}, 10);
}
}
});
////////////////////// SIDE PANEL //////////////////////
$('#open').click(function(){
if($('#B').width() > 0){
$('#B').animate({width: '0px'}),
$( ".container" ).removeClass( "no-scroll" ).animate({right: '200px'});
}
else{
$('#B').animate({width: '200px'}),
$( ".container" ).addClass( "no-scroll" ).animate({right: '200px'});
}
});
$('#close').click(function(){
$('#B').animate({width:"0px"}),
$( ".container" ).removeClass( "no-scroll" ).animate({right: '0px'});
});
$("body").on("swipeleft",function(){
$('#B').animate({width:"200px"}),
$( ".container" ).addClass( "no-scroll" ).animate({right: '200px'});
});
$("#B").on("swiperight",function(){
$(this).animate({width:"0px"}),
$( ".container" ).removeClass( "no-scroll" ).animate({right: '0px'});
});
Here's the fiddle.
Note: The function of the panel is to push the content of the page to the left, when opened. It should be scrollable, but the content of the page should not be. This panel can also be opened/closed with a toggle button on the page.
It turns out, the answer was pretty simple.
Adding height:100vh to the wrapper is what made the page jump, upon opening the panel. I added that to prevent to content from being scrollable. But, I discovered that if I put overflow:hidden on the body instead of the wrapper, it would prevent scrolling. So, I could eliminate height:100vh and all that "scroll position" jargon all together.
Here is the fix.
/////////////////////// SEARCH TOGGLE //////////////////////
$('#open').click(function(){
if($('#B').width() > 0){
$('#B').animate({width: '0px'}),
$( ".container" ).animate({right: '200px'});
$( "body" ).removeClass( "no-scroll" );
}
else{
$('#B').animate({width: '200px'}),
$( ".container" ).animate({right: '200px'});
$( "body" ).addClass( "no-scroll" );
}
});
$('#close').click(function(){
$('#B').animate({width:"0px"}),
$( ".container" ).animate({right: '0px'});
$( "body" ).removeClass( "no-scroll" );
});
$("body").on("swipeleft",function(){
$('#B').animate({width:"200px"}),
$( ".container" ).animate({right: '200px'});
$( "body" ).addClass( "no-scroll" );
});
$("#B").on("swiperight",function(){
$(this).animate({width:"0px"}),
$( ".container" ).animate({right: '0px'});
$( "body" ).removeClass( "no-scroll" );
});
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 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());
}
});
});
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" );
}
});
});