Kéo: Thay thế dữ liệu

Question

Tôi nhận được một trang web có một số phần tử html bao gồm cả vùng văn bản và khung nội tuyến có thể chỉnh sửa được nhúng (a rte).

Sử dụng mã này tôi quản lý để nắm bắt những sự kiện draggesture trên trang chính và thiết lập text/html dữ liệu

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

Bây giờ, khi thả trong một textarea trên trang chính 'my_data' bị giảm. Giảm trong iframe có thể chỉnh sửa cũng giảm 'my_data'.

Nhưng tôi đã nhận ba vấn đề ở đây là tôi không hiểu:

1. Binding loại handler cho sự iframe tài liệu hoạt động. Tôi thiết lập dữ liệu sự kiện tương tự như mã trên, nhưng nó không hoạt động. Khi tôi kéo nó bên trong khung nội tuyến hoặc đến vùng văn bản trên trang chính 'my_data' không được chèn vào, nhưng nội dung được chọn ban đầu. Tôi có thể làm gì để đặt 'my_data'?

2. Tôi cố gắng để sửa đổi/thiết lập dữ liệu bằng cách sử dụng sự kiện thả trong iframe và trang chính:

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

Nhưng tôi nhận được một lỗi javascript trên cả hai văn bản (trang chính và iframe): "Sửa đổi không được phép cho tài liệu này". Tại sao tôi gặp phải lỗi này? Có một cách giải quyết cho điều này? Có vẻ như pimvdb đã có một giải thích cho việc này.

3. Khi lựa chọn <p>some text</p><hr><p>some text</p> từ trang chính và kéo này vào iframe contenteditable gì bị chèn khi tôi đặt 'my_data' (trên Draggesture) bằng cách sử dụng mã ví dụ đầu tiên từ trên cao. Kéo vào văn bản hoạt động. Có ai biết điều gì sai ở đây không? (vấn đề không xảy ra bằng chrome!)

EDIT: Đây là một bản demo jsFiddle để chơi xung quanh và hiểu được vấn đề:

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

Answer 1

Bạn đang sử dụng draggesture nhưng dragstart công trình.

Thứ hai, không có ý nghĩa khi đặt dữ liệu dataTransfer trên drop, vì kéo "gói" đã đến trước đó. Nó đang bị phá hủy sau khi thả, vậy tại sao bạn muốn thay đổi nó vào thời điểm đó?

Tôi đã làm sạch câu đố của bạn để hiểu thẳng những gì đang diễn ra để có thể giải quyết nó và đây là kết quả. Dường như nó hoạt động trên 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'); 
});