CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
John
John

Reputation: 1797

jQueryUI droppable and sortable - cant change the order and few bugs i cant fix

I have put most of the code together, just cant get few things working: -

  1. Items in the "Selected DVD's" area I need to be able to change the order of these DVDs in this list only, so i can change the order from 1,2,3 to 3,1,2.

  2. Items in the "Un-selected" area wont drag up into the selected dvds area

  3. If i click on the link at the top "add all unselected dvd's" and then click on the link "Remove all selected dvds" it doesnt add them into the correct area at the bottom. However if you click the "Remove all selected dvds" link first... it works

  4. Following #3 if i then add a new dvd at the top right, sometimes it adds loads of the same dvd?

Here is a working demo of what i have so far: http://jsfiddle.net/BFWzS/1/

There is more code in the fiddle above ^

// let the gallery items be draggable
$( "li", $gallery ).draggable({
  cancel: "a.ui-icon", // clicking an icon won't initiate dragging
  revert: "invalid", // when not dropped, the item will revert back to its initial position
  containment: "document",
  helper: "clone",
  cursor: "move"
});

// let the trash be droppable, accepting the gallery items
$trash.droppable({
  accept: "#gallery > li",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
    deleteImage( ui.draggable );
  }
});

Hope someone can help us out,

Cheers

Upvotes: 0

Views: 677

Answers (1)

musefan
musefan

Reputation: 48415

As my comments have suggested, you should break this down into more specific problems and ask them as separate questions. But here is some information to help you out:

  1. Check out JQuery Sortable

  2. Check out the Connect Lists option [EDIT] In your JSFIddle, your problem doesn't exist for me (in Chrome)

  3. This should be a separate question (although you can probably find a duplicate of this already)

  4. If not solved by your answer to 3, then should be an additional question

For the purposes of a more meaningful answer, here is some sample code showing the use of JQuery Sortable:

<div class="container">
    <div class="header">Selected DVDs</div>
    <ul id="gallery" class="dvdlist">
        <li>DVD 1</li>
        <li>DVD 2</li>
        <li>DVD 3</li>
    </ul>
</div>
<div class="container">
    <div class="header">Un-selected DVDs</div>
    <ul id="trash" class="dvdlist">
        <li>DVD 4</li>
        <li>DVD 5</li>
        <li>DVD 6</li>
    </ul>
</div>

$("#gallery").sortable({
    connectWith: "#trash"
});
$("#trash").sortable({
    connectWith: "#gallery"
});

You can see this in action here.

Upvotes: 3

Related Questions