We Keep Coding

Iterate through each li in ul

I have a calendar. Each days has the following structure to begin with.
<td>
<ul class="calendar-tasks">
</ul>
</td>
Now, I drag tasks inside the ul with the following:
$(function() {
var $tasks = $(".list-tasks"),
$calendar = $(".calendar-tasks");
$("li", $tasks).draggable({
revert: false,
helper: function (event, ui) {
return $("<div class='task-image'><span class='icon-pushpin'></span></div>");
},
cursorAt: { left: 25 },
containment: "document",
zIndex: 500
});
$("li", $calendar).draggable({
revert: false,
helper: function (event, ui) {
return $("<div class='task-image'><span class='icon-pushpin'></span></div>");
},
cursorAt: { left: 25 },
containment: "document",
zIndex: 500
});
$calendar.droppable({
accept: ".list-tasks > li, .calendar-tasks > li",
activeClass: "highlight-active",
hoverClass: "highlight-hover",
drop: function (event, ui) {
var dropped = $(this).append(ui.draggable);
var task = $(ui.draggable).attr("data-task"),
classname = $(ui.draggable).attr("data-class");
$(this).find("li").each(function() {
if ($(this).hasClass("has-task")) {
// Do nothing
} else {
$(this).find("li").append("<div data-task='" + task + "' class='listed-task " + classname + "'>#" + task + "</div>");
$(this).find("li").addClass("has-task");
}
});
}
});
$tasks.droppable({
accept: ".calendar-tasks > li",
activeClass: "highlight-active2",
hoverClass: "highlight-hover2",
drop: function (event, ui) {
$(this).append(ui.draggable);
}
});
});
Each drop is an <li></li> itself with some content in it. After each drop the li should get a class has-task. I'm kinda struggling atm to get this thing working. All is happening in the following piece of code:
$calendar.droppable({
accept: ".list-tasks > li, .calendar-tasks > li",
activeClass: "highlight-active",
hoverClass: "highlight-hover",
drop: function (event, ui) {
var dropped = $(this).append(ui.draggable);
var task = $(ui.draggable).attr("data-task"),
classname = $(ui.draggable).attr("data-class");
$(this).find("li").each(function() {
if ($(this).hasClass("has-task")) {
// Do nothing
} else {
$(this).find("li").append("<div data-task='" + task + "' class='listed-task " + classname + "'>#" + task + "</div>");
$(this).find("li").addClass("has-task");
}
});
}
});
I though that if I iterate through each <li> this will be subject to that li.
What am I doing wrong?

The first $(this).find("li").each() function iterates through each li element. By calling $(this).find("li").each again, you're referring to li elements listed in the first list of li elements: which I assume do not exist.

$(this).find("li").each(function() { //check what 'this' object is giving. }
Based on 'this' object use prev() or next() to point the li object and follow ur code as usual.

Sortable table and Draggable TR

I am trying to do something very simple. I am trying to make the TRs of a table sortable with JQuery UI and also Draggable to a different div which I will use as a trash can. I have the following script. But for some reason Drag and Sort are conflicting
$("#TBL_OUTPUT").sortable({
items: 'tr:not(:first)'
});
$("#TBL_OUTPUT tr").draggable({
helper: "clone",
start: function(event, ui) {
c.tr = this;
c.helper = ui.helper;
}
});
$("#TRASHCAN").droppable({
hoverClass: "TRASH_Hover",
drop: function(event, ui) {
$(c.tr).remove();
$(c.helper).remove();
}
});
Any thoughts?

You can simply use two sortables. Like:
$("table").sortable({
items: 'tr:not(:first)',
connectWith: 'div.bin',
helper: 'clone',
start: function (e, ui) {
$('.bin').css("background-color", "red");
},
stop: function (e, ui) {
$('.bin').css("background-color", "green");
}
});
$('div.bin').sortable({
connectWith: 'table',
update: function (e, ui) {
var content = ui.item.children('td').text();
if (confirm('Delete item: ' + content + '?')) {
$('div.bin').empty();
alert('Item ' + content + ' deleted!');
} else {
alert(content + 'will stay in the bin and you can drag it back to table');
}
}
});
FIDDLE: https://jsfiddle.net/rte2by43/4/
If you want to keep droppable, this will also work:
$("#TBL_OUTPUT").sortable({
items: 'tr:not(:first)',
connectWith: '#TRASHCAN'
});
$("#TRASHCAN").droppable({
hoverClass: "TRASH_Hover",
drop: function(event, ui) {
alert($(ui.draggable).children('td').text());
}
});

Make draggable sortable with the droppable

I made a drag & drop system. The draggable items can be dropped in placeholders. Those placeholders are added dynamically based on the amount of draggable items.
But when I drag a draggable item between those placeholders, it doesn't get appended to it. I've tried many many things but I'm still stuck on it.
I'm afraid that I'll need to change a lot of the code, but maybe one of you has a genius idea on how to solve this.
Here's the jsfiddle
Is it possible to check wether it has been placed on a placeholder, or not?
This is my droppable function:
function dropping () {
$("li.placeholder").droppable({
accept: ".to-drag",
hoverClass: correct_placeholder,
activeClass: active_placeholder,
revert: false,
tolerance: "pointer",
drop: function (event, ui) {
var dragging = ui.draggable.clone().find("img").remove();
$(this).append(dragging).addClass("dropped");
$(this).droppable('disable');
var day = $(ui.draggable).attr('data-id');
var index = $(event.target).index();
$(this).attr("data-id", day);
$(this).attr("date-order", index);
$(this).addClass("drop-"+ index);
$(this).attr("data-content", "");
$(this).find("h1, p").remove();
var dropped = $(".dropped").length;
var original = $(".placeholder").length;
if (dropped === original) {
$("li.placeholder").removeClass(blank_placeholder);
$("#dropzone").append('<li class="placeholder ' + blank_placeholder +' " data-id="" data-order=""></li>');
init();
}
$(".remove").click(function() {
var removable = $(this).parent();
var modal = $(this).attr("data-modal");
$(".modal-"+modal).remove();
if (dropped > original) {
$(this).parent().droppable('enable')
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
$(this).parent().droppable('enable');
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
init();
});
}
});
$("li.dropped").droppable({
disabled: function (event, ui) {
disabled: true
}
});
}

Detect unacceptable drag drop in jQuery-ui droppable

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.

only allow one object to be dropped jquery

$("li").draggable({
helper: "clone"
});
$("#div1").droppable({
drop: function (event, ui) {
$("<p></p>").appendTo("#div1");
}
});
I have objects in a list that can be dragged and dropped into a div named div1. But when I drop one into the div i don't want to be able to drop another into it. I have tried using, for, if and while loops with a count.

Here is a full solution, it allows only one item dropped, but also, if one exists, it gets replaced on the next drop with the new one. (Usefull if someone changes their mind. Just call
refreshDragDrop(dragClassName,dropDivId);
refreshDragDrop = function(dragClassName,dropDivId) {
$( "." + dragClassName ).draggable({
connectToSortable: "#" + dropDivId,
helper: "clone",
revert: "invalid"
});
$("#" + dropDivId).droppable({
accept: '.' + dragClassName,
drop: function (event, ui) {
var $this = $(this),
maxItemsCount = 1;
if ($this.children('div').length == maxItemsCount ){
//more than one item,just replace
$(this).html($(ui.draggable).clone());
} else {
$(this).append($(ui.draggable).clone());
}
}
});
}

This should help:
drop: function (event, ui) {
var $this = $(this),
maxItemsCount = 1;
if ($this.children('li').length > maxItemsCount ){
ui.sender.draggable('cancel');
alert("To much items!");
}
}