11

I have a Draggable/Sortable set of lists that I am dynamically adding items to, but the trouble is, that once an item has been added, it's not possible to move them to the new lists. You can see the functionality here: http://jsfiddle.net/Y4T32/2/

Drag an item from the available list to one of the target lists, and you'll see that I mean. Now add a "callout" and try to drag the new item to one of the target columns.

I found another answer on here that works as I want, but have been unable to reproduce the results they got (and of course, can't find the answer now). Any insight into what I am doing wrong here?

Improve this question
1
  • I found this answer and made a slight modification. However, it would seem to me that this might not be the best way to go about it. I updated my fiddle. jsfiddle.net/Y4T32/7 Commented May 16, 2012 at 20:42

1 Answer 1

Reset to default
19

UPDATED ANSWER

You have to call .draggable() for each element that gets added. The jQuery selector that you use at initialization time only applies to elements that exist at the moment, not to the ones you will create.

Here's some JS that should work:

var draggable_opts = {
            connectToSortable: ".sph-callout-portlet",
            helper: "clone",
            opacity: 0.75,
            revert: 'invalid',
            stop: function(event, ui) {
                //alert(ui)
            }
        };

$(function() {
    $( ".sph-callout-portlet" ).sortable({
        opacity: 0.75,
        placeholder: "ui-state-highlight",
    }).disableSelection();

    $( "#sph-callout-portlet-avail li" ).draggable(draggable_opts);

    $(document).on("click",'#addNewCo',function(e){
        e.preventDefault();
        var newCo = $('<li>New Callout</li>').draggable(draggable_opts);
        $('#sph-callout-portlet-avail').append(newCo);
    });
});​

http://jsfiddle.net/SGevw/

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

It's a good idea to post your code here in case jsFiddle is ever inaccessible. Also, an explanation of what you did is a plus.
@PedroFerreira, this is VERY close to what I want, except, I do not want users to be able to drag them between columns or back to the available column. That's why I gave them different class names.
@AaronWagner: OK, I had misunderstood what you wanted. Here's a version that should work.
Perfect! I see now what you did, making the new item dragable before appending it. Smart. I thought that I had tried something similar, but to no avail! Thanks for the help!
@PedroFerreira, if you wanted to take a look at this question too, it would be much obliged!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.