Здравствуйте,
все перетаскивается, и исправно работает, но стоит изменить содержимое поля и перетащить его, как оно отчищается. Помогите пожалуйста изменить скрипт, так, чтобы изменения сохранялись.
<ul id="file_list">
<li draggable="true">
<textarea name="text">текст...</textarea>
</li>
<li draggable="true">
<textarea name="text"></textarea>
</li>
</ul>
Пример вызова:
var fileList = $('#file_list');
var drop = new Draggable(fileList.find('li'));
fileList.find('li').each(function() {
drop.handleAdd(this);
});
function Draggable(cols) {
var dragSrcEl;
this.handleDragStart = function(e) {
this.style.opacity = '0.9';
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
dragSrcEl = this;
this.classList.add('moving');
}
this.handleDragOver = function(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
this.handleDragEnter = function(e) {
this.classList.add('over');
}
this.handleDragLeave = function(e) {
this.classList.remove('over');
}
this.handleDrop = function(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
this.handleDragEnd = function(e) {
this.style.opacity = '1';
[].forEach.call(cols, function(col) {
col.classList.remove('over');
col.classList.remove('moving');
});
}
this.handleAdd = function(col) {
col.setAttribute('draggable', 'true');
col.addEventListener('dragstart', this.handleDragStart, false);
col.addEventListener('dragenter', this.handleDragEnter, false);
col.addEventListener('dragover', this.handleDragOver, false);
col.addEventListener('dragleave', this.handleDragLeave, false);
col.addEventListener('drop', this.handleDrop, false);
col.addEventListener('dragend', this.handleDragEnd, false);
}
}
