We Keep Coding

Limiting the area in which a jqueryui sortable item can be dropped

I have an 'ul' of elements, the last 'li' of which is to create new elements.
The ul is sortable thanks to jqueryui sortable() and I have excluded the last 'li' element from the $('ul').sortable() so that the element is not draggable. However, other items from the list can be dropped under this last li element. I want to prevent this. Is there any way to limit where can the items be dropped?
Simple concept HTML:
<ul>
<li class="list-element">potato</li>
<li class="list-element">tomato</li>
<li class="list-element">banana</li>
<li class="list-element">pistacchio</li>
<li class="new-element">new product</li>
</ul>
and .js:
$('ul').sortable();
$("ul").disableSelection();
$('ul').sortable({ cancel: '.new-element' });
Fiddle: http://jsfiddle.net/s4yjpoaL/
As you can see all the items can be dragged under the .new-element li. Is there any way to limit the draggability up to right before the last li element?
PS: I know it'd be way easier to have the last element outside the ul, but that's not the point here :P

Do this by specifying the items of the sort to be the other li items.
http://jsfiddle.net/s4yjpoaL/2/
$('ul').sortable({
items: ".list-element",
cancel: ".new-element",
});
This disables the drop zone for the last element in addition to making it unsortable.

Iterate through selected items in an unsorted list

I am currently developing a remote file browser that allows the user to multi-select files and to delete the selected files together. The list is essentially a styled unordered list:
<ul class="nav">
<li><a>File one</a></li>
<li><a>File two</a></li>
<li><a>File three</a></li>
<li><a>File four</a></li>
</ul>
I've added a jQuery script that changes adds a style class to an li (i.e. highlights the item) when it is clicked:
var lis = $('.nav li a').click(function(e){
if(!e.ctrlKey) {
lis.removeClass("selected");
}
$(this).toggleClass("selected");
});
Now I want to implement a delete function that has to decide which files are selected, but I am unsure what is the best way to do this.
The easiest way will be to loop through the li entries and to check which entries are styled the class "selected".
Is this method advisable? That is, it is a good idea to use classes as flags?

You can simply use class selector to build required selector. there is no need to iterate over all li element and check for class selected existance:
$('.selected');
to remove li having anchor as selected:
$('.selected').parent().remove()
or
$('li:has(.selected)').remove()

Using jQuery .remove() to take <li> elements out of an <ol> but the DOM still thinks that the <li> elements are there?

I have a function that removes li elements from an ol when you click on an icon. When the ol is totally emptied, I would like to replace the li with a bit off filler material so that the user can still drag and drop new li elements into the list. (It's kind of a shopping cart setup.)
The problem that I'm running into is that when I use jQuery .remove() the li is removed from the DOM BUT jQuery doesn't it as being gone. So, for example, calling .has(".li") returns true even when all the li's are gone, and calling childNodes.length returns the total number of li that have ever existed in the ol. Code follows:
function onClick(element)
var parent = $(element).parent().attr('id');
$(element).remove();
var container = document.getElementById(parent);
console.log(container.childNodes.length); //always logs the total number that have ever existed
if(container.childNodes.length < 1){
parent.append("<li class='placeholder'>Drag and Drop Components Here</li>");
I'm pretty sure that this isn't the problem because I've been careful to grab the parent container only after the element was removed from the DOM.
Any ideas?
EDIT: The requested ul and li structure:
<h4>Components</h4>
<ol id="components" class="droppable">
<li class="placeholder">Drag and Drop Components Here</li>
</ol>
Users drag and drop the following code into the list, which is retrieved via $.get from some php scripts.
<li id="$id"><table style="color:white"><tr><td>$this->longname</td>
<td>Delete image</div></td></tr></table></li>
The click handler is the code above.

Assuming you have misplaced the function name onClick instead of destrComp, there are multiple problems.
To the click handler you are passing the clicked anchor element not the li element as you as assuming, so when you say $(element).parent() or $(element).remove() it is not dealing with the elements you think it is dealing.
Try
function destrComp(element) {
var $parent = $(element).closest('ul');
$(element).closest('li').remove();
if ($parent.children().length < 1) {
$parent.append("<li class='placeholder'>Drag and Drop Components Here</li>");
}
}

According to your code you seem to be removing the "a" tag, but not the parent.
$(element).remove(); //This removes the a tag
$(element).parents('li').remove(); //This removes the parent li element

Parallel sorting two different lists using jquery sortable

I am having very specific case where I needed to split the data into two different lists in html. Like this:
<ul id="first_list">
<li ref="1">The quick brown</li>
<li ref="2">My father works</li>
</ul>
And the second list is like:
<ul id="second_list">
<li ref="1">jumps over the lazy dog</li>
<li ref="2">at the Ministry of Defense</li>
</ul>
So as you can see I from the "ref" attribute I know which <li> element from the second list is a continuation of which <li> element from the fist list.
Now I need to enable the jQuery UI sortable() to those lists but when I reorder the first I need the second reordered too. I tried using handle but it doesn't works because it looks like the handle element needs to be inside the element which is moved but these two are at a different places in the page.

I do believe that you should have shared some of your code (what you've tried), and I'm assuming you are familiar with Sortable plugin that you are using. You should run the below code on success event of Sortable so as soon as you sort any LI, the other list will be sorted too. Anyways,
Try this:
//This line stored the LIs in a temp variable and remove it
var $cachedList = $('<div />').html($('#second_list').html());
$('#second_list > li').remove();
//This line loads up the first UL's LIs and replaces the content for each LI
//using $cachedList.
$('#second_list').html($('#first_list').html()).find('li').each(function () {
$(this).html($cachedList.find('li[ref="'+$(this).attr('ref')+'"]').html());
});
Demo: http://jsfiddle.net/AR8px/

prototype js library beginner

I have a list in which I am dynamically adding the classname, now when I click on that item again the class stays there. I dont want that I want that classname to be assigned to the currently clicked list item.
<ul id="menubar">
<li>one</li>
<li>two</li>
</ul>
Now when I click on one I dynamically add classname, and when I click on two the classname stays the same on one and it gets affected on two as well. but I want it to be removed from one and to be applied to currently clicked item.
How can I achieve it?

$$('#menubar li').invoke('observe', 'click', (function(e) {
//removes classname from all the li elements
$$('#menubar li').invoke('removeClassName', 'myClass');
//Gets the li you clicked on
var list_item = Event.element(e);
//adds the classname
list_item.addClassName('myClass');
}).bindAsEventListener(this));

You need to be including .removeClass() in the same event as when you addClass() to the other one.
$('.one').click(function(){
$(this).addClass('myClass');
$('.two').removeClass('myClass');
});
This could be written more efficiently, but im writing this in between meetings.
Hope it's a start!