Using following on a web site to be able to drag elements from one column to another: https://github.com/RubaXa/Sortable It does not saves to database a new position of an item, to which column it was saved as it is written on Javascript.
Now my solution is per documentation to track when it was placed to another column with:
onEnd: function (evt) {
alert(evt.from);
}
This will get from where it is moving:
Evt.from
Now, i am trying to alert it and it shows only:
[object HTMLDivElement]
How to convert it to html or how to show the data on Sortable correctly?
full code:
!function (t) {
"use strict";
t(document).ready(function () {
t(".m-tasks__items").each(function () {
Sortable.create(this, {
group : ".m-tasks__items",
sort : !0,
handle : ".m-tasks__item-name",
animation : 150,
onEnd : function (evt) {
var r = evt.from;
//document.getElementById(evt.from).innerHTML;
console.log("Answer: " + evt.from);
}
})
})
})
} (jQuery);
Html:
<div class="main-container m-tasks__container container-heading-bordered">
<h2 class="container-heading">
<span>Tasks (3)</span>
<span class="container-heading-controls">
<a href="#" class="iconfont iconfont-action-plus container-heading-control"></a>
</span>
</h2>
<div class="container-body m-tasks__columns">
<div class="m-tasks__column m-tasks__column--new">
<div class="m-tasks__column-header">
<span class="m-tasks__column-icon iconfont iconfont-task-label"></span>
<span class="m-tasks__column-name">Pending</span>
</div>
<button class="btn btn-outline-success btn-block iconfont icon-left btn-lg m-tasks__add-card" type="button">
Add new card <span class="btn-icon iconfont iconfont-plus"></span>
</button>
<div class="m-tasks__items m-tasks__column--new list-group">
</div>
</div>
<div class="m-tasks__column m-tasks__column--in-progress list-group">
<div class="m-tasks__column-header">
<span class="m-tasks__column-icon iconfont iconfont-task-label"></span>
<span class="m-tasks__column-name">In Progress</span>
</div>
<div class="m-tasks__items">
No tasks
</div>
</div>
<div class="m-tasks__column m-tasks__column--completed list-group">
<div class="m-tasks__column-header">
<span class="m-tasks__column-icon iconfont iconfont-task-label"></span>
<span class="m-tasks__column-name">Completed</span>
</div>
<div class="m-tasks__items">
<div class="m-tasks__item list-group-item" draggable="false" style="">
<div class="dropdown no-arrow control-dropdown m-tasks__item-control">
<span class="dropdown-toggle iconfont iconfont-dots" data-toggle="dropdown"></span>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" draggable="false">Edit</a>
<a class="dropdown-item" href="#" draggable="false">Delete</a>
<div class="dropdown-text">Set priority:</div>
<div class="dropdown-radios">
<div>
<label class="custom-control custom-radio custom-radio-simple custom-radio-simple--danger">
<input type="radio" class="custom-control-input" name="radio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">High</span>
</label>
</div>
<div>
<label class="custom-control custom-radio custom-radio-simple custom-radio-simple--success">
<input type="radio" class="custom-control-input" name="radio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Medium</span>
</label>
</div>
<div>
<label class="custom-control custom-radio custom-radio-simple custom-radio-simple--secondary">
<input type="radio" class="custom-control-input" name="radio" checked="">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Normal</span>
</label>
</div>
</div>
</div>
</div>
<h6 class="m-tasks__item-name">Title 3</h6>
<div class="m-tasks__item-desc">
desc 3 </div>
<span class="m-tasks__item-date">12-12-12</span>
<span class="m-tasks__item-priority iconfont iconfont-task-bell m-tasks__item-priority--medium"></span>
</div><div class="m-tasks__item list-group-item" style="">
<div class="dropdown no-arrow control-dropdown m-tasks__item-control">
<span class="dropdown-toggle iconfont iconfont-dots" data-toggle="dropdown"></span>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
<div class="dropdown-text">Set priority:</div>
<div class="dropdown-radios">
<div>
<label class="custom-control custom-radio custom-radio-simple custom-radio-simple--danger">
<input type="radio" class="custom-control-input" name="radio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">High</span>
</label>
</div>
<div>
<label class="custom-control custom-radio custom-radio-simple custom-radio-simple--success">
<input type="radio" class="custom-control-input" name="radio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Medium</span>
</label>
</div>
<div>
<label class="custom-control custom-radio custom-radio-simple custom-radio-simple--secondary">
<input type="radio" class="custom-control-input" name="radio" checked="">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Normal</span>
</label>
</div>
</div>
</div>
</div>
<h6 class="m-tasks__item-name">Title 2</h6>
<div class="m-tasks__item-desc">
desc 2 </div>
<span class="m-tasks__item-date">12-12-12</span>
<span class="m-tasks__item-priority iconfont iconfont-task-bell m-tasks__item-priority--normal"></span>
</div>
</div>
<div class="m-tasks__empty-column">
<img src="img/tasks/empty.png" alt="">
<div class="m-tasks__empty-column-text">Drag items here or <br> <a href="#" class="link-info">Create New</a></div>
</div>
</div>
</div>
</div>