Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Перетаскивание в html5, очищается форма (https://javascript.ru/forum/dom-window/42989-peretaskivanie-v-html5-ochishhaetsya-forma.html)

Zhazhah 17.11.2013 17: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);
    }
}

Deff 18.11.2013 03:12

Zhazhah,
Перетаскивать нун не HTML формы - а сам объект, ибо в HTML нет записанных полей ввода, они в объекте, либо перед перетаскиванием явно парсить объект вынимая значения полей и явно вписывая их вHTML формы, добавляя строки к value (не Айс метод, но как то делал для передачи текстовой строкой во фрейм на ином домене)

Zhazhah 20.11.2013 12:14

Подключил Jquery плагин, он лучше в этом плане.


Часовой пояс GMT +3, время: 09:41.