尝试使用Rubaxa JS在两个列表之间进行排序后检索数据属性

Question

我使用Rubaxa Sortable库在两个列表之间对数据进行排序。实际上，我无法跟踪两个列表之间拖放的记录。问题是如何获取列表的数据属性的更新顺序，我将删除该元素。

这是关于JS Fiddle的代码：

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

代码：

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 i {
-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 i {
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' */
}

非常感谢您的帮助。）

谢谢＆amp;的问候，

阿卜杜拉