Làm thế nào để bạn tắt setDragImage

Question

giống như nó nói. làm thế nào để bạn vô hiệu hóa hình ảnh kéo. Tôi có một bảng điều khiển nổi và hình ảnh kéo trông rất tệ. không có jquery xin vui lòng.

Answer 1

Từ MDN:

Nếu nút là một yếu tố HTML img, một phần tử HTML canvas hoặc một yếu tố XUL image, dữ liệu hình ảnh được sử dụng. Nếu không, image phải là nút hiển thị và hình ảnh kéo sẽ được tạo từ này.

Từ điều này nó sẽ làm theo đó để "tắt" hình ảnh kéo bạn chỉ cần chuyển một phần tử trống (nhưng có thể nhìn thấy) đến setDragImage. Làm thế nào về điều này:

// create an empty <span> 
var dragImgEl = document.createElement('span'); 

// set its style so it'll be effectively (but not technically) invisible and 
// won't change document flow 
dragImgEl.setAttribute('style', 
    'position: absolute; display: block; top: 0; left: 0; width: 0; height: 0;'); 

// add it to the document 
document.body.appendChild(dragImgEl); 

// your DataTransfer code here--assume we put it in a variable called 'dt' 

dt.setDragImage(dragImgEl, 0, 0); 

Nếu một sản phẩm nào <span> không hoạt động đối với một số lý do bạn luôn có thể sử dụng <img src="blank.png"/> nơi blank.png là một trong suốt 1-pixel PNG. Hy vọng rằng sẽ giúp!

Answer 2

Đặt hình ảnh ma quái đến một gif 1x1px minh bạch sử dụng chuỗi dữ liệu

lấy cảm hứng từ một bình luận trong các chủ đề, tuy nhiên hình ảnh họ đưa vào bình luận của họ đã không làm việc vì vậy tôi đã phải sục sạo xung quanh cho cái này.

Điều này giải quyết được sự cố của tôi trong tất cả các trình duyệt.

element.ondragstart = function (ev) { 
    var img = document.createElement('img') 
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' 
    ev.dataTransfer.setDragImage(img, 0, 0) 
}