JQuery UI use sortable without sorting, just move

Question

Here's my fiddle: http://jsfiddle.net/MtgbM/

Here's the rules: List-A is my list of items.

I should not be able to reorder List-A
I should not be able to "remove" things from List-A (when they are dragged to List-B it still stays in List-A but a copy is moved to List-B)
I should not be able to drag things from List-B to List-A

List-B is my source

I can remove items from List-B (drag them off)
I can reorder the items in List-B

That's pretty much it. Basically List-A is a source and List-B is the destination. Most of this I see I can configure using JQuery the one I'm not sure about is bullets #1 and #2 on List-A. How do I make List-A "Unsortable" and how do I make it "Clone" instead of move an item?

Any help would be appreciated

mu is too short · Accepted Answer

You don't want everything to be sortable for this.

The

s in the top list should be draggables with helper: 'clone', this helper option lets you drag copies of the

s out of the list without altering the list itself. So you start with this:

$('#list-A li').draggable({
    helper: 'clone'
});

Then you need to make the bottom list droppable and you want to clone the elements when they're dropped. You can do the cloning using the drop event:

$('#list-B ul').droppable({
    drop: function(event, ui) {
        $(this).append($(ui.draggable).clone());
    }
});

You want to be able to move things around in the bottom list and that's where sortable comes in. So the bottom list should be sortable as well as droppable. You also have to keep the droppable from cloning things while you're only sorting them. You can use the start and stop sortable events to set a data flag and then check that flag in the droppable drop event handler. Something like this for the sortable:

$('#list-B ul').sortable({
    start: function(event, ui) {
        ui.item.data('sorting', true);
    },
    stop: function(event, ui) {
        ui.item.removeData('sorting');
    }
});

and then add a check to the drop event handler:

$('#list-B ul').droppable({
    drop: function(event, ui) {
        if(ui.draggable.data('sorting'))
            return;
        $(this).append($(ui.draggable).clone());
    }
});

Demo: http://jsfiddle.net/ambiguous/PyWAM/

JQuery UI use sortable without sorting, just move

Answers (1)

Related Questions