我已经在Polymer2.0元素中实现了sortablejs。我可以从组中拖放该项目。我现在面临的问题是随机（不确定原因和方式），但是2张卡片或物品被移动到了组列表中。这是屏幕截图。
todos是一个对象，其中包含一组具有项数组的列表。
列表 https://www.dropbox.com/s/9wp6vv668p3ckr2/Screenshot%202019-04-30%2007.18.16.png?dl=0
放下时的结束状态（您看到2张卡移动到了我不希望的新列中。我只希望一张卡移动） https://www.dropbox.com/s/int4uyyl3945tjv/Screenshot%202019-04-30%2007.18.50.png?dl=0
代码：聚合物元素html
<div class="board__sprint">
<template is="dom-repeat" items="{{todos}}" as="row" restamp>
<div class="list">
<div class="list-content">
<div style="float: left; width: 100%; text-align: center;">
<div style="float: left; width: 80%; text-align: left; padding-top: 10px;">
<h7 style="color: black; font-size: 20px; font-weight: 800; padding-left: 10px;margin-top: 5px;">
[[row.tasks.length]]
</h7>
<h7 style="color: black; font-size: 12px; font-weight: 200; padding: 2px; margin-top: 5px;">
[[row.title]]
</h7>
</div>
<div style="float: left; width: 20%; text-align: center;">
<paper-icon-button icon="icons:delete-sweep" style="color: grey;" id="deleteNote" row="[[row]]"
on-tap="_removeColumnTriggerDialog"></paper-icon-button>
</div>
</div>
<div style="display: table;">
<div style="width: 90%; height: 3px; background: #0c66b5;">
<h7> </h7>
</div>
<div id="myid[[row.id]]" class="list-group" style="min-height: 120px;">
<template is="dom-repeat" items="{{row.tasks}}" as="todo" restamp>
<!-- <div class$="{{determineDragable(todo)}}"> -->
<div class="item">
<div class="ticket" data-index$="{{todo.id}}">
<paper-card style="float:center; width: 100%;" class="singleColor" data-index$="{{todo}}"
data-index$="{{row}}">
<div style="float:left; width: 15%" style$="{{getRandomInt(0, 20)}}">
<h7> </h7>
</div>
<div style="width: 100%">
<div style="float: left; width: 15%; vertical-align:center">
<px-icon icon="px-vis:pin"></px-icon>
</div>
<div style="float: left; width: 70%">
<h7 class="banksTitle" style="color: black; font-size: 12px; text-align:left;">
<b>[{{index}}]</b> [[todo.actTitle]]
</h7>
<h7 class="banksTitle" style="color: grey; font-size: 12px; text-align:left;">
[[todo.actDesc]]
</h7>
</div>
<template is="dom-if" if="{{checkDummy(todo)}}">
<div style="float: left; width: 15%;">
<paper-icon-button icon="icons:close" style="color: grey;" id$="bt_readmore"
todo="[[todo]]" row="[[row]]" on-tap="_moveDel"></paper-icon-button>
</div>
</template>
<template is="dom-if" if="{{checkDummyNot(todo)}}">
<div style="float: left; width: 15%;">
<paper-icon-button icon="image:crop-square" style="color: grey;" id$="bt_readmore"
todo="[[todo]]" row="[[row]]" on-tap=""></paper-icon-button>
</div>
</template>
</div>
<div>
<h5> </h5>
</div>
<div style="width: 100%;display: table;">
<div style="float: left; width: 15%;">
</div>
<div style="float: left; width: 70%; text-align: center;">
<template is="dom-if" if="{{checkDummy(todo)}}">
<paper-icon-button icon="av:playlist-add-check" style="color: green;"
id$="bt_readmore" todo="[[todo]]" row="[[row]]" on-tap=""></paper-icon-button>
</template>
<template is="dom-if" if="{{checkDummy(todo)}}">
<paper-icon-button icon="editor:attach-file" style="color: maroon;" id$="bt_readmore"
todo="[[todo]]" row="[[row]]" on-tap=""></paper-icon-button>
</template>
<template is="dom-if" if="{{checkDummy(todo)}}">
<paper-icon-button icon="editor:border-color" style="color: grey;" id$="bt_readmore"
todo="[[todo]]" row="[[row]]" on-tap=""></paper-icon-button>
</template>
</div>
<div style="float: right; width: 15%;">
</div>
</div>
</paper-card>
</div>
</div>
</template>
</div>
</div>
<div>
<h5> </h5>
</div>
<div class="addTicket">
<paper-button raised class="blue" on-tap="_addTicketDialog" row={{row}}>Add Ticket</paper-button>
</div>
</div>
</div>
</template>
</div>
和特定于sortablejs的onAdd事件的JS脚本
_todosChanged() {
setTimeout(() => {
console.log('this.todos.length = ' + this.todos.length);
var self = this;
if (this.todos !== null || this.todos !== undefined) {
var lowestOrder = 0;
var highestOrder = 0;
var options = {
group: 'shared',
animation: 200,
sort: false,
draggable: ".item",
onAdd: function (evt) {
console.log('---FROM----');
console.log(evt.from.id);
console.log('---TO----');
console.log(evt.to.id);
console.log('---ITEM----');
console.log(evt.item.innerText);
var foundFrom = false;
var fromId = evt.from.id.substr('myid'.length);
var fromCol;
var foundTo = false;
var toId = evt.to.id.substr('myid'.length);
var toCol;
console.log('fromId =' + fromId + ' toId =' + toId);
self.todos.forEach(child => { //todos = 1, 3, 4 & row = 3
if (!foundTo) {
if (child.id === toId) {
foundTo = true;
toCol = child;
}
}
if (!foundFrom) {
if (child.id === fromId) {
foundFrom = true;
fromCol = child;
}
}
});
console.log('toCol = ' + JSON.stringify(toCol));
console.log('fromCol = ' + JSON.stringify(fromCol));
//find item in from col
var str = evt.item.innerText;
var itemKey = str.substr(0, str.indexOf(':'));
itemKey = itemKey.substr(itemKey.indexOf('KEY-')).substr('KEY-'.length);
console.log('itemKey = ' + itemKey);
var arrItemToRemove = fromCol.tasks;
console.log('arrItemToRemove = ' + JSON.stringify(arrItemToRemove));
var indexItem = -1;
for (var i = 0; i < arrItemToRemove.length; i++)
if (arrItemToRemove[i].id === itemKey) indexItem = i;
console.log('indexItem = ' + indexItem);
if (indexItem < 0 || indexItem > arrItemToRemove.length) {
document.getElementById('toastError').show('No item found');
} else {
// console.log('indexItem=' + indexItem);
var newItemToPush = arrItemToRemove[indexItem];
console.log('newItemToPush=' + JSON.stringify(newItemToPush));
//now add the item to the right
var arr = toCol.tasks;
if (arr === null || arr === undefined) arr = [];
arr.push({
'actTitle': newItemToPush.actTitle,
'actDesc': newItemToPush.actDesc,
'actDt': newItemToPush.actDt,
'parent': toCol.order,
'id': newItemToPush.id
});
console.log('arr=' + JSON.stringify(arr));
self.$.query.ref.child(toCol.$key).child('tasks').set(arr);
var nwArr = arrItemToRemove.splice(indexItem, 1);
document.getElementById('toastShort').show('Data moved: ' + newItemToPush.actTitle);
self.$.query.ref.child(fromCol.$key).child('tasks').set(arrItemToRemove);
}
},
};
this.todos.forEach(child => {
if (lowestOrder > child.order) lowestOrder = child.order;
if (highestOrder < child.order) highestOrder = child.order;
// console.log(child.id);
var selector = this.shadowRoot.querySelector('#myid' + child.id);
Sortable.create(selector, options);
});
console.log('lowestOrder=' + lowestOrder + ' highestOrder=' + highestOrder);
this.set('order', highestOrder);
}
});
}
答案 0 :(得分：1)
好的...这就是我解决问题的方法
firebase查询是异步的，因此我使用观察者函数来更新在dom-template中使用的哑变量。我使用异步来做到这一点。
真正的问题是，当您从列表中删除了sortablejs用于呈现项目的元素时。通过使用作为Firebase对象副本的Dummy变量，我可以避免此问题。
我在用户离开页面时离线同步对象。现在工作正常。