Rails / jQuery sortable => drag Item on top of each other for nesting Model -

well, have notecards listed <div> (not <ul> , <li>) inside wrapper <div id="notecards">. sorting them works great jqueryui sortable().

i notes nestable:

class note < activerecord::base     has_many    :subnotes,      class_name: "note", foreign_key: "parent_id", dependent: :destroy     belongs_to  :parent_note,   class_name: "note", foreign_key: "parent_id" end 

but don't want sorting nestable <ul> , <li> tags. want can drag notecards onto each other, , 1 doped on top of note gets submitted via ajax server (to update parent_id) , disappears on current view.

i tried use second list (outside of wrapper #notecard) , connected them sortable.({ connectwith: 'bal..' }) on outside list run ajax code sending new parent server, , .remove() note.

=> that's not behavior want.

so 1 idea each note has inside <div> it's own list, note dropped to, each note need it's own jqueryui.sortable() code generated ???? ~> no idea + clue in mind how achieve that.

here current state pseudo code (with wrong behavior / not drop on note behavior i'm looking for):

html:

<div id="droptoparent"> </div>  <div id="notecards">     <div class="note">         note 1     <div>     <div class="note">         note 2     <div>     <div class="note">         note 3     <div> </div> 

jquery ui sortable code (current state not behavior i'm looking for)

( function($) {          // drop zone parent => not behavior i'm looking     $('#droptoparent').sortable(         connectwith: '#notecards',         receive: function(event, ui) {             $(ui.item).hide()             $.ajax( 'sending new parent id server' );             ui.item.remove();         }     );       // #notecards div sortable     $('#notecards').sortable({         connectwith: '#droptoparent'         update: function() {             $.ajax( 'sending data server reposition remaining notecards ...' )         }     });  })(jquery); 

wohoo, found solution problem. want share insights got while struggling through problem.

first, here fiddle: https://jsfiddle.net/vs6ho3yq/

1) possible have multiple droppable targets inside sortable

2) there weird behavior when sort note1 after note2 , still hold note1. note2 displayed on position one, droppable target of note2 still in middle, note1 has been moved (in fiddle weird behavior corrected line described in [3] )

3) solve issue, need add refreshpositions: true, sortable options (!!! sortable not droppable) (line 21 in /javascript part/ fiddle).

if want see weird behavior yourself, comment line 21 in /javascript part/ fiddle

hope helps in future. cheers

here code of fiddle:

html

<div id="notecards">     <div class="note">         note1     </div>     <div class="note">         note2     </div>     <div class="note">         note3     </div> </div> 

css

#notecards {     display: block;     position: relative;     margin: 60px 0;     padding: 0;     border: 1px solid blue; }  .note {     display: inline-block;     position: relative;     margin: 0;     padding: 1rem 1.5rem;     vertical-align: top;     border: 1px solid #ccc; }  .note-on-note {     background-color: red; } 

js

(function($) {      $('.note').droppable({         tolerance: 'pointer',         over: function() {             $(this).toggleclass('note-on-note');         },         out: function() {             $(this).toggleclass('note-on-note')         },         drop: function() {             $('.note').each().removeclass('note-on-note');              // ajax, eg. move note subnote         }     });      // #notecards div sortable     $('#notecards').sortable({         revert: 200,         refreshpositions: true,         update: function() {             // ajax eg. update posiotions         }     });   })(jquery);