Văn bản ẩn có thể được kéo từ trình duyệt?

Question

Làm cách nào để bạn có thể tạo phần tử html khi kéo từ trình duyệt vào trình soạn thảo văn bản, văn bản ẩn trên hoặc trong phần tử kéo sẽ được dán vào trình chỉnh sửa?

Suy nghĩ đầu tiên của tôi là sử dụng thuộc tính href trên thẻ neo:

<a href="hidden message text here">Drag me into a text editor!</a> 

này hoạt động tuyệt vời trong chrome, nhưng firefox và safari loại bỏ không gian từ giá trị href mà làm cho thông điệp sao chép không sử dụng được.

Bất kỳ ý tưởng nào?

Answer 1

Thay vì thao tác hành vi mặc định của trình duyệt để kéo văn bản/liên kết/hình ảnh, bạn muốn đặt dữ liệu thành thứ gì đó tùy ý trong sự kiện dragstart.

Ví dụ, sử dụng văn bản từ một ẩn #content:

$('[draggable]').on('dragstart', function(e) { 
    var content = $(this).find('#content').text(); // Can be anything you want! 
    e.originalEvent.dataTransfer.setData('text/plain', content); 
    $(this).addClass('dragging'); 
}); 

Dưới đây là một JSFiddle

Answer 2

làm việc Đối với các phiên bản của IE xuống dưới 10 mà không hỗ trợ phương pháp dataTransfer, tôi đã khám phá một cách hơi khó khăn khác để thực hiện công việc này.

Về cơ bản bạn làm cho văn bản ẩn với css sau đó sử dụng js để chọn nó ở chế độ nền khi di chuột.

HTML

<div id="drag_area" draggable="true"> 
    <div id="text"> 
     hidden text 
    </div> 
</div>​ 

CSS

#text { filter:alpha(opacity=0); opacity:0; 
     overflow:hidden; z-index:100000; width:180px; height:50px } 

JS

function selectText(elementID) { 
     var text = document.getElementById(elementID); 
     if ($.browser.msie) { 
      var range = document.body.createTextRange(); 
      range.moveToElementText(text); 
      range.select();   
     } else if ($.browser.mozilla || $.browser.opera) { 
      var selection = window.getSelection(); 
      var range = document.createRange(); 
      range.selectNodeContents(text); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
     } else { 
      var selection = window.getSelection(); 
      selection.setBaseAndExtent(text, 0, text, 1); 
     } 
    } 
    $('#drag_area').hover(function(){ 
     selectText('text'); 
    }); 

Ở đây nó được kết hợp với giải pháp Anson và một chút phát hiện tính năng: http: // jsfiddle .net/zaqx/PB6XL/ (hoạt động trong IE8, IE9 và tất cả các trình duyệt hiện đại)

EDIT: Đã cập nhật Fiddle trong phần bình luận bên dưới.