javascript - Trying to retrieve data attributes after sorting between two lists using Rubaxa JS -

i sorting data between 2 lists using rubaxa sortable library. actually, unable track record of dragging , dropping between 2 lists. question how can updated orders of data attributes of list dropping element.

here code on js fiddle:

https://jsfiddle.net/wpplugindev/53vhp34e/22/

code:

js:

sortable.create(byid('foo'), {    group: "words",    animation: 150,    store: {     get: function (sortable) {         var order = localstorage.getitem('foo');         console.log('foo', order);         return order ? order.split('|') : [];     },     set: function (sortable) {         var order = sortable.toarray();         localstorage.setitem('foo', order.join('|'));     } }, onadd: function (evt) {     console.log('onadd.foo:', [evt.item, evt.from]); }, onupdate: function (evt) {     console.log('onupdate.foo:', [evt.item, evt.from]); }, onremove: function (evt) {     console.log('onremove.foo:', [evt.item, evt.from]); }, onstart: function (evt) {     console.log('onstart.foo:', [evt.item, evt.from]); }, onsort: function (evt) {     console.log('onstart.foo:', [evt.item, evt.from]); }, onend: function (evt) {     console.log('onend.foo:', [evt.item, evt.from]); } });  sortable.create(byid('bar'), {     group: "words",     animation: 150,     store: {          get: function (sortable) {             var order = localstorage.getitem('bar');             console.log('bar', order);             return order ? order.split('|') : [];          },         set: function (sortable) {             var order = sortable.toarray();             localstorage.setitem('bar', order.join('|'));         }  }, onadd: function (evt) {     console.log('onadd.bar:', evt.item); }, onupdate: function (evt) {     console.log('onupdate.bar:', evt.item); }, onremove: function (evt) {     console.log('onremove.bar:', evt.item); }, onstart: function (evt) {     console.log('onstart.foo:', evt.item); }, onend: function (evt) {     console.log('onend.foo:', evt.item); } }); 

html

<!-- latest sortable --> <script src="//rubaxa.github.io/sortable/sortable.js"></script> <!-- jquery --> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <!-- connected lists --> <div class="container" style="height: 520px"> <div data-force="18" class="layer block" style="left: 5%; top: 20px; width: 40%">            <div class="layer title">column 1</div>             <ul id="foo" class="block__list block__list_words">                 <li data-id="event_date" class="item">event date</li>                 <li data-id="event_details" class="item">event details</li>                 <li data-id="event_schedule" class="item">event                   schedule</li>                 <li data-id="event_segments" class="item">event                  segments</li>                                </ul>         </div>         <input type="text" hidden="" name="sep_event_layout_col1" value="event_date,event_details,event_schedule,event_segments" class="visuaplayoutcol01">         <div data-force="20" class="layer block" style="left: 40%; top: 20px; width: 40%;">             <div class="layer title">column 2</div>             <ul id="bar" class="block__list block__list_words">                 <li data-id="event_image" class="item">event image</li>                 <li data-id="event_desc" class="item">event description</li>                 <li data-id="event_map" class="item">event map</li>                 <li data-id="event_venue" class="item">event venue</li>                      </ul>         </div>         <input type="text" hidden="" name="sep_event_layout_col2" value="event_image,event_desc,event_map,event_venue" class="visuaplayoutcol02">     </div>     <div class="clear"></div> 

css

.container { width: 80%; margin: auto; min-width: 1100px; max-width: 1300px; position: relative; } .layer .title { background-color: #ff7373; color: #fff; display: inline-block; padding: 3px 10px; position: relative; z-index: 1000; } #foo .sortable-drag { background: #daf4ff; } .item{  list-style:none;  } .block { opacity: 1; position: absolute; } .block__list { padding: 20px 0; max-width: 360px; margin-top: -8px; margin-left: 5px; background-color: #fff; } .block__list-title { margin: -20px 0 0; padding: 10px; text-align: center; background: #5f9edf; } .block__list li { cursor: move; } .block__list_words li { background-color: #fff; padding: 10px 40px; } .block__list_words .sortable-ghost { opacity: 0.4; background-color: #f4e2c9; } .block__list_words li:first-letter {  text-transform: uppercase; } #editable {} #editable li { position: relative; } #editable { -webkit-transition: opacity .2s; transition: opacity .2s; opacity: 0; display: block; cursor: pointer; color: #c00; top: 10px; right: 40px; position: absolute; font-style: normal; } #editable li:hover { opacity: 1; } #filter button { color: #fff; width: 100%; border: none; outline: 0; opacity: .5; margin: 10px 0 0; transition: opacity .1s ease; cursor: pointer; background: #5f9edf; padding: 10px 0; font-size: 20px;  }  #filter button:hover { opacity: 1; } #filter .block__list { padding-bottom: 0; } .drag-handle { margin-right: 10px; font: bold 20px sans-serif; color: #5f9edf; display: inline-block; cursor: move; cursor: -webkit-grabbing;  /* overrides 'move' */ } 

your appreciated :)

thanks & regards,

abdullah