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>');
}
}
});
});
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();
}
When I drop some divs into a sortable pane, I can grab the newly created divs only after the second time I click on them.
I suppose this is a refresh-related issue, but I cannot figure out how to make it work.
Here is the jsfiddle: http://jsfiddle.net/DvE5Q/
And the code:
$(".box").draggable({
helper: 'clone'
});
$("#left").droppable({
accept: '.box.out',
drop: function (e, ui) {
$(this).append('<div class="box"></div>');
var droppedBox = $(this).children().last();
$(droppedBox).html(ui.helper.html());
}
});
$("#left").sortable();
Thanks for your help!
I would use the attribute connectToSortable: '#left'
DEMO http://jsfiddle.net/DvE5Q/1/
$(".box").draggable({
helper: 'clone',
connectToSortable: '#left'
});
$("#left").droppable({
accept: '.box.out',
drop: function (e, ui) {
}
});
$("#left").sortable();
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 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?