Перетаскивание в html5, очищается форма
Здравствуйте,
все перетаскивается, и исправно работает, но стоит изменить содержимое поля и перетащить его, как оно отчищается. Помогите пожалуйста изменить скрипт, так, чтобы изменения сохранялись. <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);
}
}
|
Zhazhah,
Перетаскивать нун не HTML формы - а сам объект, ибо в HTML нет записанных полей ввода, они в объекте, либо перед перетаскиванием явно парсить объект вынимая значения полей и явно вписывая их вHTML формы, добавляя строки к value (не Айс метод, но как то делал для передачи текстовой строкой во фрейм на ином домене) |
Подключил Jquery плагин, он лучше в этом плане.
|
| Часовой пояс GMT +3, время: 04:31. |