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();
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();
}
One thing left in my project was to make the two divs draggable and droppable simultaneously. Now I have the working code of divs that can be dragged and dropped but for example I can drag a div from target area and drop it on users area but I cant seem to figure out a way to drag those divs from users and assign to different users.
$(document).ready(function(){
$(".dragable").draggable({
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').append($item);
}
});
});
http://jsfiddle.net/coder880/TpbZk/31/
The issue is because once the item is dragged/dropped it is then cloned. This clone does not have the draggable() plugin instantiated on it. You need to call draggable() on the $item again. Try this:
var draggableOptions = {
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
}
$(".dragable").draggable(draggableOptions);
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
var $item = ui.draggable.clone();
$item.draggable(draggableOptions);
$(this).addClass('has-drop').append($item);
}
});
Updated fiddle
it should only be cloned when its from target otherwise it should move it.
To achieve this you need to remove the helper: 'clone' option in the cloned draggable element and maintain a flag on the element to determine whether it is a brand new clone or has been dragged previously and moved again. To do this you could use a class, something like this:
$(".dragable").draggable({
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
var $item = $(ui.draggable)
if (!$item.hasClass('clone')) {
$item = $item.clone().addClass('clone');
$item.draggable({
cancel: "a.ui-icon",
revert: true,
cursor: "move",
revertDuration: 0
});
}
$(this).addClass('has-drop').append($item);
}
});
Example fiddle
I'm using jQuery-ui draggable, droppable. My main container should only accept plugin-containers which also are droppables which accept plugins. Below is the code my code snippet:
$("#main").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".plugin-container",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$("<div></div>").html(ui.draggable.html()).appendTo(this).droppable({ accept: '.plugin', drop: function (event, ui) { $('<div></div>').html(ui.draggable.html()).appendTo(this); } }).sortable();
}
});
The problem is that when a plugin is dragged into the main container, I want to:
Hightlight Plugin containers that plugin can be dropped
If plugin is dropped in the main container show an error message
but the droppable over and drop methods only fire if the dragged item is acceptable and won't fire for unacceptable drags (in this case .plugin). what can I do here?
Here is the fiddle
I think I have found THE EXACT SOLUTION TO YOUR PROBLEM !!
Check out this FIDDLE
CODE:
$("#main").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
//accept: ".plugin-container",
drop: function( event, ui ) {
if(ui.draggable.hasClass('plugin'))
{
alert('This element cannot be dropped here !');
$(ui.draggable).draggable({ revert: true });
}
else if(ui.draggable.hasClass('plugin-container'))
{
//console.log('context = ');
//console.log(ui.draggable.context);
$( this ).find( ".placeholder" ).remove();
$("<div></div>").addClass('plugin-container')
.html(ui.draggable.html())
.appendTo(this)
.droppable({
accept: '.plugin',
greedy:true,//this will prevent the parent droppables from receiving the droppable object
drop: function (event, ui) {
$(ui.draggable).draggable({ revert: false });
$('<div></div>')
.addClass('plugin')
.html(ui.draggable.html())
.appendTo(this);
}
}).sortable();
}
}
});
$(".menu div").draggable({
appendTo: "body",
helper: "clone"
});
You can make all draggabbles acceptable and then in your over and drop methods filter the wanted/unwanted divs and show error message.
drop: function( event, ui ) {
var dropped = ui.draggable.attr('class');
if (dropped == ".plugin") {
// show alert
} else {
}
There is also the 'revert' option that you can use to revert a dragged element back to its original position.
I'm beginning to learn how to use jQuery and am creating a small project management app. In the app you can drag employees from a list and drop them on to the different projects to assign them to it.
Inside each project div is a ul that I would like the employees to be appended to. The problem at the moment is I can get the employees added tot he div but they add outside the ul. I have tried setting up a variable to grab the element id from the project div and assign it to a variable. That variable would then be concatenated in the appendTo() call to add the item to the right list. This where I am having the problem. The variable keeps returning as [object Object].
Thanks for any help in advance. Here is a link to the JSFiddle aswell.
HTML
<ul class='employee-list'>
<li class='employee'>Ian</li>
<li class='employee'>Danny</li>
</ul>
<div id='task-list'>
<div id="task-1234" class='task'>
<h3>Design new email</h3>
<ul id="task-1234-employees" class='tasked-employees'></ul>
</div>
<div id ="task-4321" class='task'>
<h3>Update Cart Code</h3>
<ul id ="task-4321-employees" class='tasked-employees'></ul>
</div>
</div>
Jscript
$(document).ready(function () {
$(function () {
var $taskID = $('.task').mouseover(function() {return this.id;});
$(".employee").draggable({
revert: 'invalid'
}, {
snap: '.task-slot',
snapMode: 'inner'
}, {
appendTo: 'body',
helper: 'clone'
});
$('.task').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
$(this).find(".placeholder").remove();
$("<li class='task-slot'></li>").text(ui.draggable.text()).appendTo("#" + $taskID +"-employees");
}
});
});
});
Basically you have no need for the mouse over in the first place.
All the required info is available in the ui and event arguments of the drop method.
Try this
$(document).ready(function () {
$(function () {
$(".employee").draggable({
revert: 'invalid'
}, {
snap: '.task-slot',
snapMode: 'inner'
}, {
appendTo: 'body',
helper: 'clone'
});
$('.task').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
var employee = ui.draggable.text();
$(this).find(".placeholder").remove();
$("<li class='task-slot'></li>").text(employee)
.appendTo($(event.target).find('ul.tasked-employees'));
}
});
});
});
Check Fiddle
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>');
}
}
});
});