Показать сообщение отдельно
  #1 (permalink)  
Старый 17.11.2013, 17:48
Аспирант
Отправить личное сообщение для Zhazhah Посмотреть профиль Найти все сообщения от Zhazhah
 
Регистрация: 27.11.2010
Сообщений: 48

Перетаскивание в 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);
    }
}
Ответить с цитированием