Возможен ли DropOn с сортировкой по рубахе?
Я экспериментирую, чтобы понять, что это возможно с перетаскиванием через библиотеки javascript. Я создал два списка, один с именами абонентов и второй с людьми, которых нужно вызвать.
Я хотел бы иметь возможность перетаскивать имя вызывающего абонента в строку с именем во втором списке, а имя вызывающего абонента должно отображаться в третьем столбце; Так же, как имя "Джерри" в примере на скриншоте.
Код, на котором основан этот скриншот, можно найти ниже. За исключением ссылки на библиотеку Sortable.js, все включено на этой странице.
Другими словами, когда я перетаскиваю имя звонящего Дональда и помещаю его на Фреда, тогда имя Фред должно появиться в третьем столбце. У кого-нибудь есть идеи, как этого добиться?
Спасибо за вашу помощь! Это действительно ценится.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sortable: `put: []` demo</title>
<style id="tableLayout">
.rTable {
display: table;
width: 50%;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
}
.rTableHead {
display: table-cell;
padding: 3px 10px;
background-color: black;
color: white;
border: 0px solid #999999;
}
.rTableCell{
display: table-cell;
padding: 3px 10px;
border: 0px solid #999999;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: bold;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
}
.rTableBody {
display: table-row-group;
}
</style>
<!-- Sortable.js -->
<script src="https://rubaxa.github.io/Sortable/Sortable.js">
<!--- <script src="Sortable.js"> -->
</script>
</head>
<body>
<h2>Callers</h2>
<div class="rTable">
<div class="rTableRow">
<span class="rTableHead"><strong>Caller</strong></span>
</div>
<div id="callers" class="rTableBody list-group">
<div class="rTableRow" class=" list-group-item">
<span class="rTableCell">Jerry</span>
</div>
<div class="rTableRow" class=" list-group-item">
<span class="rTableCell">Donald</span>
</div>
</div>
</div>
<hr />
<h2>Calls</h2>
<div class="rTable">
<div class="rTableRow">
<span class="rTableHead"><strong>Name</strong></span>
<span class="rTableHead"><strong>Telephone</strong></span>
<span class="rTableHead"><strong>Called by</strong></span>
</div>
<div id="calls" class="rTableBody list-group">
<div class="rTableRow" class=" list-group-item">
<span class="rTableCell">John</span>
<span class="rTableCell"><a href="tel:0123456785">0123 456 785</a></span>
<span class="rTableCell">Jerry</span>
</div>
<div class="rTableRow" class=" list-group-item">
<span class="rTableCell">Fred</span>
<span class="rTableCell"><a href="tel:0123456785">0123 456 785</a></span>
<span class="rTableCell"></span>
</div>
<div class="rTableRow" class=" list-group-item">
<span class="rTableCell">Bill</span>
<span class="rTableCell"><a href="tel:0123456785">0123 456 785</a></span>
<span class="rTableCell"></span>
</div>
<div class="rTableRow" class=" list-group-item">
<span class="rTableCell">Freddy</span>
<span class="rTableCell"><a href="tel:9876532432">9876 532 432</a></span>
<span class="rTableCell"></span>
</div>
</div>
</div>
<script>
// rTable Simple list
Sortable.create(calls, {
animation: 150,
group: {
name: 'calls',
put: ['calledby']
}
});
// rTable Simple list Called
Sortable.create(callers, {
group: {
name: 'calledby',
pull: 'clone'
},
sort: false,
animation: 150
});
</script>
</body>
</html>