Перетаскивание: замена данных - PullRequest
Новая
       10

Перетаскивание: замена данных

8 голосов
/ 16 сентября 2011

Я получил веб-страницу с некоторыми элементами HTML, включая текстовую область и встроенный contenteditable iframe (rte).

С помощью этого кода мне удается отследить событие draggesture на главной странице и установить текст / html-data 

jQuery(document).bind('draggesture', function(event){                   
    event.originalEvent.dataTransfer.setData('text/html', 'my_data');
});

Теперь, когда вы добавляете текстовую область на главной странице, my_data удаляется. Отбрасывание в приемлемом iframe также удаляет my_data.

Но у меня есть три вопроса, которые я не понимаю:

1. Работает привязка такого рода обработчика к документу iframes. Я устанавливаю данные о событиях аналогично приведенному выше коду, но он не работает. Когда я перетаскиваю его в iframe или в текстовую область на главной странице, my_data не вставляется, а выбирает исходное содержимое. Что я могу сделать, чтобы установить my_data?

2. Я пытался изменить / установить данные, используя событие drop в iframe и на главной странице: 

jQuery(ed.getDoc()).bind('drop', function(event){
  event.originalEvent.dataTransfer.setData('text/html',  'my_data');
});

Но я получаю ошибку javascript в обоих документах (на главной странице и в iframe): «Для этого документа не разрешены изменения». Почему я получаю эту ошибку? Есть ли обходной путь для этого? Похоже, у pimvdb есть объяснение этому.

3. При выборе <p>some text</p><hr><p>some text</p> на главной странице и перетаскивании его в contenteditable iframe ничего не вставляется, когда я устанавливаю 'my_data' (на Draggesture), используя первый пример кода сверху. Перетаскивание в текстовую область работает. Кто-нибудь знает, что здесь не так? (проблема не возникает при использовании Chrome!)

РЕДАКТИРОВАТЬ: Вот демоверсия jsFiddle, чтобы поиграть и понять проблему:

http://jsfiddle.net/R2rHn/5/

1 Ответ

2 голосов
/ 20 сентября 2011

Вы используете draggesture, но dragstart работает.

Во-вторых, не имеет смысла устанавливать данные dataTransfer на drop, потому что «пакет» перетаскивания уже прибыл к тому времени. Он разрушается после падения, так почему вы хотите изменить его в этот момент?

Я почистил твою скрипку, чтобы понять, что происходит, чтобы иметь возможность ее решить, и это результат. Кажется, работает на Chrome.

http://jsfiddle.net/R2rHn/7/

tinyMCE.init({
   mode : "exact",
   elements : "content",
   skin : "o2k7",
   skin_variant : "silver",

   setup : function(ed) {
     ed.onInit.add(function(ed, evt) {
       var iframe = ed.getDoc();

       jQuery(iframe).bind('dragstart', function(event){
         event.originalEvent
              .dataTransfer
              .setData('text/plain', 'modified_content_from_iframe');
       });
     });
   },

});

jQuery(document).bind('dragstart', function(event){          event.originalEvent
         .dataTransfer
         .setData('text/html',  'my_data_html');

    event.originalEvent
         .dataTransfer
         .setData('text/plain', 'my_data_plain');
});
...