I have some elements like this:
$("#select_h").draggable({
connectToSortable:".group",
helper: "clone",
revert:"invalid"
});
$("#datepick_h").draggable({
connectToSortable:".group",
helper: "clone",
revert:"invalid"
});
$("#group").draggable({
connectToSortable:".group, .fc",
helper: "clone",
revert:"invalid",
stop: function() {
updateConnections();
});
So, they are dragging to Sortables like this:
$( ".group" ).sortable({
connectWith:".group",
receive: function(event,ui) {
$(newItem).css("color","cyan");
},
beforeStop: function (event, ui) {
newItem = ui.item;
}
}).disableSelection();
all works, but dragged groups don't recieves elements and working different from groups made on the first build of page.
Tried to update connections:
function updateConnections() {
$("#select_h").draggable( "option", "connectToSortable", ".group" );
$("#datepick_h").draggable( "option", "connectToSortable", ".group" );
$("#group").draggable( "option", "connectToSortable", ".group, .fc" );
$(".group").sortable( "option", "connectWith", ".group" );
}
after dragging a group element, but nothing changes.
That's the solution?
Related
I have been trying to achive functionality as follows:
-you can drag and drop multiple 450x150 onto .drop_cont
-then you can drag and drop 300x150 onto 450x150
I tried adding and removing classes but it doesn't seem to work.
Is there any way to do that, probably there is some way that I didn't think of.
Demo:
jsFiddle
Sample Code:
$(document).ready(function () {
$( ".idg_row" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".idg_column" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".drop_cont" ).droppable({
accept: ".idg_row",
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
$( ".droppableC" ).droppable();
});
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
}
Once you add the class, you need to recall droppable to run on the new elements.
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
$('.droppableC:not(.ui-droppable)' ).droppable();
}
I can drag and drop, it works very good. But at the destination place the ordered list does not work properly. It should look like a ordered-list not like a pile. The destination box should grow with new element, but it does not work too.
Where is my mistake? Here is the code: http://jsfiddle.net/QJ54x/
That's the jQuery-Code so far:
$( init );
function init () {
$('.draggable1').draggable ({
containment: "#ddSurvexFormDragDropArea",
scope: "d1",
stop: draggable1Stop,
helper: "clone",
});
$('#droppable1').droppable({
scope: "d1",
accept: ".draggable1",
hoverClass: "droppable1HoverClass",
drop: droppable1Drop,
});
}
function draggable1Stop(event,ui) {
// alert ('draggable1Stop');
// $(this).remove();
ui.helper.clone().appendTo($(this).parent());
$(this).remove();
}
function droppable1Drop (event, ui) {
}
OK, I got it, here is the answer (another simplified example):
http://jsfiddle.net/cKs5u/
That's the corresponding part:
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
})
given by example from jquery-api online.
i made a dropspot for drag and drop function in a div which has image + dropspot but unfortunately my function doesnt work :( am i wrong ?
http://jsfiddle.net/6tsfh/
$(function() {
$( ".right img" ).draggable
({
revert: "invalid",
helper: 'clone'
});
$( "#dropspot0" ).droppable({
tolerance: 'fit',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($("#dropspot0"));
}
});
});
Check this jsFiddle
I think JqueryUI library was not included in jsfiddle.
$(function() {
$( ".right img" ).draggable
({
revert: "invalid",
helper: 'clone'
});
$( "#dropspot0" ).droppable({
tolerance: 'intersect',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($("#dropspot0"));
}
});
});
i have a page with 2 elements:
a list of items with draggable method
a lost of items with sortable method
i only allow dragging from list 1 to list 2, and that seems to work ok.
now, what i'm looking for is that when i drag item from list 1 to list 2 the newly created element will contain some different html then the element that was dragged. is that possible?
iv'e tried this approach but that does not seem to do to the job:
$("#list_2").sortable({
placeholder: "ui-state-highlight",
cursor: "move",
delay: 150,
forcePlaceholderSize: true,
opacity: 0.5,
scrollSpeed: 40,
receive: function( event, ui ) {
ui.item.html(ui.item.find(".hide").html());
}
});
$("#list_1").disableSelection();
$(".draggable").draggable({
connectToSortable: "#template_parts",
helper: "clone",
revert: "invalid",
stop: function( event, ui ) {
}
});
any help shall be greatly appriciated
var received = false;
$(function() {
$( ".draggable" ).draggable({
connectToSortable: "#list_2"
});
$( "#list_2" ).sortable({
receive: function(event,ui){
received = true;
},
stop: function(event,ui){
if(received){
ui.item.css('color','blue');
ui.item.html(ui.item.html()+' changed');
received = false;
}
}
});
$( "#list_2" ).disableSelection();
});
Example
http://jsfiddle.net/jd8A7/4/
I have two lists , one is draggale and other is sortable. When i move item from draggable to sortable items recives span and in span X mark . But the problem is that when i sort items later in sortable item recives x one more time . Then i have something like Item 1 XX and again every time u sort new x ( or drag ).
How can i fix this ?
$(function() {
$( ".draggable" ).draggable({
helper: "clone",
connectToSortable: ".sortable"
});
$(".sortable").sortable({
stop: function(event, ui) {
ui.item.html(ui.item.text()+'<span class="remove">X</span>');
}
});
});
Check that there's no span.remove inside the item?
$(function() {
$( ".draggable" ).draggable({
helper: "clone",
connectToSortable: ".sortable"
});
$(".sortable").sortable({
stop: function(event, ui) {
if(!ui.item.find('span.remove').length) {
ui.item.html(ui.item.text()+'<span class="remove">X</span>');
}
}
});
});