Develop Reference

When dropped open textarea | jQuery

I'm new with jQuery. All I want is to make sortable. When something is dropped, it hides and open textarea with save button. When the save button is clicked text from textarea writes to a paragraph.
I searched a lot and I found these fiddles:
First one
Second one
I want to 'merge' their functionality, but when I try it's not working. Here is my code:
$('#sortable').sortable().droppable({
drop: function(ev, ui){
$(ui.draggable).html('<a id="send-thoughts" href="#">Click</a><textarea name="message"></textarea>');
}
});
$('#draggables li').draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
cursor: 'move'
});
$('#send-thoughts').click(function()
{ var thought = $('textarea[name=message]').val();
alert(thought);
});
Here is a fiddle with my work - jsfiddle.net/CxpMn/102/ (sorry, I need more reputation to post more links). Please, help!

Several issues:
First, IDs cannot be duplicated in a page, so you need to use a class instead for #send-thoughts.
Second, you can't assign a click handler to elements that don't exist yet; so we need to delegate that event handler to an element that does exist, and target the future elements within it.
Third, we need to target the textarea that is related to the element clicked
$('#sortable').sortable().droppable({
drop: function(ev, ui){
// use class instead of ID
$(ui.draggable).html('<a class="send-thoughts" href="#">Click</a><textarea name="message"></textarea>');
}
});
// delegate event to account for future elements
$(document).on('click','.send-thoughts',function() {
// get the nearest textarea
var thought = $(this).siblings('textarea[name=message]').val();
alert(thought);
});
DEMO

The problem is that you are attaching a click handler to #send-thoughts before it is ever added to the DOM. Try something like the following:
$('#sortable').sortable().droppable({
drop: function(ev, ui){
$('#my-container').show();
}
});
$('#draggables li').draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
cursor: 'move'
});
$('#send-thoughts').click(function()
{ var thought = $('textarea[name=message]').val();
alert(thought);
});
In your HTML put:
<div id="my-container" style="display: none">
<a id="send-thoughts" href="">Click</a><textarea name="message"></textarea>
</div>

Jquery UI Draggable clone disappearing

I am trying to use the jquery-ui draggable to make some element draggable.
I set the helper option to clone the current element.
It's making the clone correctly but when I drop the clone disappears. It doesn't stay at the dragged place.
See this for Demo Fiddle Link
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone();
}
});
What am I missing ?

There maybe a simpler way, but through data of draggable, you can target a property that deals with this. Like this:
stop : function(e, ui){
$('#drag').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
}
fiddle: http://jsfiddle.net/n10ucrLd/

I think there's been a lot of troubles with helper: 'clone'. I always got it to work, when I defined a droppable as well. E.g.:
HTML:
<div id="drag">Drag This</div>
<div class="container"></div>
JavScript:
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone(true);
}
});
$( ".container" ).droppable({
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
Live example: http://jsbin.com/vibeqaganu/1/edit?html,css,js,output

jquery UI draggable: ui.children is not a function

i have a draggable list, a sortable-droppable list and a couple of li's inside the first.
now i want to pull them over, in the stop-funtion i have a function that adds a class to the first child (it's a span representing the clip-number like
<li>
<span>1.</span>
<span>Title</span>
<span>1min23sec</span>
</li>
). the reason for this is, i want to represent the original clip number in the playlist(sortable).
but i get a console error saying
TypeError: ui.children is not a function
ui.children("li")[0].addClass(".slot_clip_info");
i am not 100% sure, but i think this exact code HAS already worked in the past time, i might have changed somthing without knowing, but i am not aware of that.
draggable:
$(function() {
$(".pl_clipEntry").draggable({
appendTo: "body",
revert: "invalid",
connectToSortable: "#tracks",
distance: 20,
helper: function(){
return $(this).clone().width($(this).width()); // hack for the drag-clone to keep the correct width
},
stop: function(ui) {
ui.children("li")[0].addClass(".slot_clip_info");
},
zIndex: 100
});
});
sortable:
$(function() {
var removeItem;
$("#tracks").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
placeholder: "sort_placeholder",
helper: "clone",
distance: 20,
sort: function () {
$(this).removeClass("ui-state-default");
updatePlaylist();
},
over: function (event,ui) {
updatePlaylist();
removeItem = false;
console.log(event);
console.log(ui);
var originalClass = ui.helper.context.childNodes[0].className;
console.log(originalClass);
var small_clip = originalClass.match(/(\d+)/g)[1];
ui.item.context.children[0].innerHTML = small_clip;
ui.item.context.children[0].classList.add("slot_clip_info");
},
out: function () {
updatePlaylist();
removeItem = true;
},
beforeStop: function(event,ui) {
if (removeItem) {
ui.item.remove();
}
},
stop: function(event,ui) {
console.log("checking placeholder");
var list = $(this);
var count = list.children(':not(.placeholder)').length;
list.children('.placeholder').css("display", count > 0 ? "none" : "block");
savePlaylist();
}
});
as soon as i pull and element IN or reorder them, i get the said error.
also, on refresh, the list seems to multiply itself.. but i guess that's another issue...
Full fiddle (pretty messy, functionality in top dropdown button "PL TOGGLE"
UPDATE: another thing i noticed: the first drag works without problems, then shows the error on release, subsequent drags will (mostly.. sometimes they do...) not work

you need to make ui a jquery object, and then wrap the first element in another jquery object to do what you want.
so change:
ui.children("li")[0].addClass(".slot_clip_info");
to
$($(ui).children("li")[0]).addClass(".slot_clip_info");

In jQuery UI's draggable module, the stop function has 2 parameters : event and ui.
ui is a javascript object (and not a jQuery one, there's a difference.)
This object has 3 attributes :
helper which is a jQuery object
position which is a javascript object
offset which is a javascript object
Depending on your HTML code (we don't have), you could replace
ui.children("li")[0].addClass(".slot_clip_info");
by
ui.helper.children("li")[0].addClass(".slot_clip_info");

jQuery ui menu global scope

I am using the jQuery ui menu and this function to keep track of what menu item is selected:
$(document).ready(function(){
$( "#menu" ).menu({
select: function(event, ui) {
alert(ui.item.text());
}
});
});
Is there a way to make their selection into a global scope variable? Currently doing everything in this function is getting messy.
Thanks

I'm not completely sure what you are asking for but would either of these changes help?
var tj_currently_selected_text;
function tj_process_select(event, ui){
alert('old selected text = '+tj_currently_selected_text);
tj_currently_selected_text = ui.item.text();
alert(tj_currently_selected_text);
}
$(document).ready(function(){
$("#menu").menu({
select: tj_process_select
});
})

How do I get a value where a drag-able element dropped?

I'm now developing a website that can drag elements and drop into a table cells (each cell has its "ID")
Now I can drag and drop the element to the cells but I want to know
How to get the ID of table cell where I dropped the element?
here's the picture's concept.
Suppose that cell's ID are the combination of row and column number.

At first you need to rename yours IDs because one ID can't start with a number. You neet at lest one letter, example "ID11" "ID12" ...
Than what are the Cells? div? Td? Input?
Can you a jsfiddle ?
-Edit.
you need something like thise:
jsfiddle
you must only change your skript to:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log("Dropped to" + $(".drop").attr("id"));
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});

Here is the working fiddle.
Try something like this:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log($(this).attr('id'));
}
});
});

Check this fiddle.
First you need to enable the table cells to be dragged to by defining ondragover event callback. In the fiddle:
box.ondragover = function (evt) { evt.preventDefault(); };
preventDefault ensures that the browser does not set a dropdown lock on the element.
Then you simply play around with the event data, like this:
box.ondrop = function (evt) { droppedTo.innerHTML = evt.toElement.id; };
toElement holds reference to the element that you drop on, and you can get all the data you need from it, including id.

You need to change your script like this
$(function () {
$("#draggable").draggable({
snap: ".drop"
});
$(".drop").droppable({
drop: function (event, ui) {
alert($(this).attr("id"));
console.log("Dropped to " + $(this).attr("id"));
}
});
});
Change from $(".drop").attr("id") to $(this).attr("id") to get the id of the element that you are dropping into :)
Example http://jsfiddle.net/81ja79Ls/4/