Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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);
    }
}
Ответить с цитированием
  #2 (permalink)  
Старый 18.11.2013, 03:12
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Zhazhah,
Перетаскивать нун не HTML формы - а сам объект, ибо в HTML нет записанных полей ввода, они в объекте, либо перед перетаскиванием явно парсить объект вынимая значения полей и явно вписывая их вHTML формы, добавляя строки к value (не Айс метод, но как то делал для передачи текстовой строкой во фрейм на ином домене)
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2013, 12:14
Аспирант
Отправить личное сообщение для Zhazhah Посмотреть профиль Найти все сообщения от Zhazhah
 
Регистрация: 27.11.2010
Сообщений: 48

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML5 Geolocation API, вопрос о снятии данных User-Agent (X)HTML/CSS 2 22.02.2013 20:09
vkontakte, html5 и как почему не перезагружается страница olga153b Events/DOM/Window 10 02.11.2011 15:20
не работает форма в окне, вызванном jquery page slide ikar jQuery 0 31.07.2011 22:55
Когда тэги типа <font> исчезнут? Alex455 (X)HTML/CSS 10 14.06.2011 20:14
Всплывающая форма в центре страницы для гостевой книги angel-13th Элементы интерфейса 8 05.02.2011 20:10