We Keep Coding

What is the essential part of code to make draggable function to work well using Jquery UI?

I was trying to create draggable function from jquery ui but its not working. I think its have something wrong with my jquery coding. Can you guys check it out for me?
todo.init = function (options) {
options = options || {};
options = $.extend({}, defaults, options);
$.each(data, function (index, params) {
generateElement(params);
});
$.each(codes, function (index, value) {
$(value).droppable({
drop: function (event, ui) {
var element = ui.helper,
css_id = element.attr("id"),
id = css_id.replace(options.taskId, ""),
object = data[id];
// Removing old element
removeElement(object);
// Changing object code
object.code = index;
// Generating new element
generateElement(object);
// Updating Local Storage
data[id] = object;
localStorage.setItem("todoData", JSON.stringify(data));
// Hiding Delete Area
$("#" + defaults.deleteDiv).hide();
}
});
});
$("#" + options.deleteDiv).droppable({
drop: function(event, ui) {
var element = ui.helper,
css_id = element.attr("id"),
id = css_id.replace(options.taskId, ""),
object = data[id];
// Removing old element
removeElement(object);
// Updating local storage
delete data[id];
localStorage.setItem("todoData", JSON.stringify(data));
// Hiding Delete Area
$("#" + defaults.deleteDiv).hide();
}
})
};
var generateElement = function(params){
var parent = $(codes[params.code]),
wrapper;
if (!parent) {
return;
}
wrapper = $("<div />", {
"class" : defaults.todoTask,
"id" : defaults.taskId + params.id,
"data" : params.id
}).appendTo(parent);
$("<div />", {
"class" : defaults.todoHeader,
"text": params.title
}).appendTo(wrapper);
$("<div />", {
"class" : defaults.todoDate,
"text": params.date
}).appendTo(wrapper);
$("<div />", {
"class" : defaults.todoDescription,
"text": params.description
}).appendTo(wrapper);
$("." + defaults.todoTask).draggable();
wrapper.draggable({
start: function() {
$("#" + defaults.deleteDiv).show();
},
stop: function() {
$("#" + defaults.deleteDiv).hide();
},
revert: "invalid",
revertDuration : 200
});
};
This is a Todo Application, like on the pic provided. I want the notes on Pending to be draggable to In Progress.
JsFiddle link
note: the code seems can't be process here while in my localhost it works well except that dragging function.

My problem is solved. I did search for jquery ui not working and i found out that because of compatibility. So they told me to use touch point to make it work. and it did :) Therefore it's not about my coding for it matters.. here's the link for my solution touchpunch.furf.com

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
}
});
}

How can I select dynamically div to draggable stop function?

Here is my code:
$(document).ready(function () {
var $div = $('<div>my test</div>').draggable().appendTo('body');
$div.attr('id', 'Test');
});
//$('div#Test'.draggable({
$('div').draggable({
stop: function (event, ui) {
var draggableId = $(this).attr("id");
alert(draggableId);
}
});
While dragging the dynamically div, I expected the stop function will show alert. But it not work. What am I doing wrong?
Thank you in advance for the help!

When you create your div element you call draggable on it, but without any settings. Try this:
var draggableSettings = {
stop: function (event, ui) {
var draggableId = $(this).attr("id");
alert(draggableId);
}
}
$(document).ready(function () {
$('div').draggable(draggableSettings); // any pre-existing divs
// the dynamically created div
var $div = $('<div>my test</div>', { 'id': 'Test').draggable(draggableSettings).appendTo('body');
});
Note also that the call to draggable on load needs to be placed within the document ready handler.

revert manual changes to 2 connected jquery ui sortable lsts

I have multiple jquery ui sortable lists that are connected and get balanced manually to N number of items whenever items are received by one list - just like in this answer: https://stackoverflow.com/a/13754827/27497
However, it appears that when you manually move items between lists (using jquery's .appendTo() or .prependTo()), these changes aren't detected by the jquery ui sortable library, and thus when you use the "cancel" command to revert the state, the manually moved items aren't placed back into their original list.
Is there a proper way to manually move an item from one list to another so that the sortable library is able to move the item back when you call $(".my-lists-selector").sortable("cancel");
Here is an example of how the items don't revert when you call .sortable("cancel") - just click the red cancel button after moving items from one list to another: http://jsfiddle.net/SUffL/3/
$(function() {
$( ".connectedSortable" ).sortable({
connectWith: ".connectedSortable",
update: function(event, ui) {
var ul1 = $("#ul1 li");
var ul2 = $("#ul2 li");
var ul3 = $("#ul3 li");
checkul1(ul1, ul2, ul3);
checkul2(ul1, ul2, ul3);
checkul3(ul1, ul2, ul3);
}
}).disableSelection();
$("#cancel-btn").click(function(){
$(".connectedSortable").sortable("cancel");
});
});
function checkul1(ul1, ul2, ul3) {
if (ul1.length > 5) {
ul1.last().prependTo(ul2.parent());
}
}
function checkul2(ul1, ul2, ul3) {
if (ul2.length > 5) {
if (ul1.length < 5) {
ul2.first().appendTo(ul1.parent());
} else {
ul2.last().prependTo(ul3.parent());
}
}
}
function checkul3(ul1, ul2, ul3) {
if (ul3.length > 5) {
ul3.first().appendTo(ul2.parent());
checkul2(ul1, ul2, ul3);
}
}

Here is a solution that stores the manually moved item along with list it started in and list it is moved to. Within the receive event handler the 2 lists are available as ui.sender and this. I created a simple balanceLists function to handle the manual move and the cancel of same
$(function () {
var listChange = {
startList: null,
item: null,
endList: null
}
$(".connectedSortable").sortable({
connectWith: ".connectedSortable",
receive: function (event, ui) {
listChange = {
startList: ui.sender,
item: ui.item,
endList: $(this)
}
balanceLists($(this), ui.sender)
}
}).disableSelection();
$("#cancel-btn").click(function () {
if (listChange.item) {
balanceLists(listChange.startList, listChange.endList)
$(".connectedSortable").sortable("cancel").sortable("refresh");
listChange.item=null;
}
});
});
function balanceLists($from, $to) {
$to.append($from.find('li').last())
}
DEMO: http://jsfiddle.net/SUffL/8/
This allows to undo one move with cancel button.

Getting the position of the element in a list when it's drag/dropped (ui.sortable)

I have a sortable list like this one: http://jqueryui.com/demos/sortable
Is it possible to get the start and end position of the element in the list, when it has been moved? I'm talking about their position number, in the list.
For example, if I move element 2 to position 5 in the list, I'd like to assign those two numbers to variables.
I'm new to jQuery - any help would be much appreciated.

demo: http://so.lucafilosofi.com/getting-the-position-of-the-element-in-a-list-when-its-drag-dropped-ui-sortable/
SOLUTION:
$(function() {
$('ul#sortable').sortable({
start: function(event, ui) {
var start_pos = ui.item.index();
ui.item.data('start_pos', start_pos);
},
update: function(event, ui) {
var start_pos = ui.item.data('start_pos');
var end_pos = ui.item.index();
alert(start_pos + ' - ' + end_pos);
}
});
});
NOTE: Updated to make use of jQuery data() method under advice of Alconja

I believe what you are looking to do is done with the serialize method. Serialize is get the new order of the list.

For some reason ui.item.index() did not work for me.
This did:
update: function (event, ui)
{
var index = $('li', $(ui.item).parent()).index(ui.item);
alert(index);
}