1

Here is a JSfiddle I'm working with.

I'm trying to create two lists from which I can move each item in and out between them and changes will update below inside the update function / sort status div area.

My first alert on line 3 works but when I call the click function on line 5 line 6 alert doesn't work. Overall I think my code may be missing something or a semi colon etc. is out of place. Please help and leave feedback, thanks.

$(document).ready(function() {
 alert(0);
 $(".shopping_list").onclick(function() {
    alert(1);
    $("#names #places").sortable({
         containment: 'parent', 
        tolerance: 'pointer',
        cursor: 'pointer', 
        revert: true, 
        opacity: 0.60,
        connectWith:"#names #places",
        update: function(event, ui) {
             content = $(this).text();
              $('#sort_status').text(content);
        }
    })

 });
});
T J
  • 42,762
  • 13
  • 83
  • 138
Nemi9
  • 19
  • 3

2 Answers2

0

First of all: $("#names #places") this means that you have element which id is "names" and that element has child with id "places".

You have to setup sortable each list. Also: $(".shopping_list").onclick should be:

$(".shopping_list").click
Grissom
  • 1,080
  • 8
  • 21
  • I have updated and I have setup each list as .sortable but both list does not respond. I got all three of my alerts to work but that just on when I click on the list. my updated fiddle jsfiddle.net/Nemi9/76JPk/4 – Nemi9 Jun 26 '14 at 21:22
  • Doesn't work because you didn't include jqueryui.js library. try now: http://jsfiddle.net/76JPk/6/ – Grissom Jun 26 '14 at 22:04
  • Also you can remove on click for list, because on load you can initialize sortable http://jsfiddle.net/76JPk/7/ – Grissom Jun 26 '14 at 22:10
0

Like grissom pointed out in his answer and comments,

  • Firstly you need to add jQuery-UI.
  • $("#names #places") searches for an element#places inside an element #names. To select both the elements, you need to comma separate them like $("#names , #places").
  • You should move the sortable initialization out of the click event.

Other than that:

  • You need to remove containment: 'parent' otherwise you can't drag the item out of the current list (hence you can't move items between the lists, obviously)

    Demo

  • Unless you want the <h3> headers to be sortable (this is also invalid HTML) - you need to move them out of the <ul>

Demo

Community
  • 1
  • 1
T J
  • 42,762
  • 13
  • 83
  • 138
  • Thanks Grissom you've help me tremendously this is my new fiddle link http://jsfiddle.net/Nemi9/76JPk/15/ with both of your suggested changes. I think I fixed the issue. Tilwin Joy you are also correct I need to move the H3 out and I change parent to document. Now for some reason this works in fiddle but not in my browser? – Nemi9 Jun 27 '14 at 14:06
  • are you sure you've correctly linked to jquery, jquery ui and the code in wrapped in `$(document).ready()` function..? also check for error in console... – T J Jun 28 '14 at 08:58