CSS / JS để ngăn kéo hình ảnh ma?

Có cách nào để ngăn người dùng nhìn thấy bóng ma của hình ảnh mà họ đang cố gắng kéo (không quan tâm đến bảo mật của hình ảnh, nhưng trải nghiệm).

Tôi đã thử cách khắc phục sự cố với lựa chọn màu xanh trên văn bản và hình ảnh nhưng không phải là hình ảnh ma:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(Tôi cũng đã thử lồng hình ảnh bên trong một div với các quy tắc tương tự được áp dụng cho div). Cảm ơn

Bạn có thể đặt draggablethuộc tính thành falsemã đánh dấu hoặc mã JavaScript.

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);

<img id="myImage" src="http://placehold.it/150x150">

Tôi nghĩ bạn có thể thay đổi

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

thành một

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

Thử nó:

img {
  pointer-events: none;
}

và cố gắng tránh

* {
  pointer-events: none;
}

Bạn có thể sử dụng thuộc tính CSS để tắt hình ảnh trong trình duyệt webkit.

img{-webkit-user-drag: none;}

Điều này sẽ vô hiệu hóa việc kéo hình ảnh trong tất cả các trình duyệt , trong khi vẫn duy trì các sự kiện khác như nhấp chuột và di chuột. Hoạt động miễn là có sẵn HTML5, JS hoặc CSS.

<img draggable="false" onmousedown="return false" style="user-drag: none" />

Nếu bạn tự tin người dùng sẽ có JS, bạn chỉ cần sử dụng thuộc tính JS, v.v. Để linh hoạt hơn, hãy xem xét ondragstart, onselectstart và một số CSS chạm / chạm WebKit.

Xử lý dragstartsự kiện và return false.

Bạn có thể chỉ định một hình ảnh ma thay thế nếu bạn thực sự cần sử dụng các sự kiện kéo và không thể đặt draggable = false. Vì vậy, chỉ cần gán một png trống như vậy:

    $('#img').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement('img');
            dragIcon.src = 'blank.png';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });

Đặt hình ảnh làm nền của một div trống hoặc dưới phần tử trong suốt. Khi người dùng nhấp vào hình ảnh để kéo, họ đang nhấp vào div.

Xem http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>

Đối với Firefox, bạn cần đi sâu hơn một chút với điều này:

var imgs = document.getElementsByTagName('img');

    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
        e.preventDefault();
    }

Thưởng thức.

Tôi thấy rằng đối với IE, bạn phải thêm thuộc tính draggable = "false" vào hình ảnh và neo để ngăn kéo. các tùy chọn CSS hoạt động cho tất cả các trình duyệt khác. Tôi đã làm điều này trong jQuery:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

Có một giải pháp dễ dàng hơn ở đây hơn là thêm các trình lắng nghe sự kiện trống. Chỉ cần đặt pointer-events: nonevào hình ảnh của bạn. Nếu bạn vẫn cần nó có thể nhấp được, hãy thêm một thùng chứa xung quanh nó để kích hoạt sự kiện.

<img src="myimage.jpg" ondragstart="return false;" />

Đã thử nghiệm trên Firefox: loại bỏ và đưa hình ảnh trở lại hoạt động! Và nó cũng minh bạch trong vụ hành quyết. Ví dụ,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

EDIT : Điều này chỉ hoạt động trên IE và trên Firefox, thật kỳ lạ. Tôi cũng đã thêm draggable = falsevào mỗi hình ảnh. Vẫn là một con ma với Chrome và Safari.

EDIT 2 : Giải pháp hình ảnh nền thực sự là giải pháp tốt nhất. Sự tinh tế duy nhất là thuộc background-sizetính phải được xác định lại mỗi khi thay đổi hình nền! Hoặc, đó là những gì nó trông giống như từ phía tôi. Vẫn tốt hơn, tôi gặp vấn đề với imgcác thẻ thông thường trong IE, trong đó IE không thể thay đổi kích thước hình ảnh. Bây giờ, hình ảnh có kích thước chính xác. Đơn giản:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

Ngoài ra, có lẽ xem xét những người:

background-Repeat:no-repeat;
background-Position: center center;

Bạn có thể đặt hình ảnh được hiển thị khi một mục được kéo. Đã thử nghiệm với Chrome.

setDragImage

sử dụng

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

Ngoài ra, như đã được đề cập trong các câu trả lời, bạn có thể đặt draggable="false"trên phần tử HTML, nếu không thể kéo phần tử đó thì không vấn đề gì.

Tất cả kết thúc, không chọn hoặc kéo, với tất cả các tiền tố trình duyệt:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

Bạn cũng có thể đặt draggablethuộc tính thành false. Bạn có thể làm điều này với HTML nội tuyến : draggable="false", với Javascript : elm.draggable = false, hoặc với jQuery : elm.attr('draggable', false).

Bạn cũng có thể xử lý các onmousedownchức năng để return false. Bạn có thể làm điều này với HTML nội tuyến : onmousedown="return false", với Javascript : elm.onmousedown=()=>return false;, hoặc với jQuery:elm.mousedown(()=>return false)

Công việc này đối với tôi, tôi sử dụng một số kịch bản hộp đèn

.nodragglement {
    transform: translate(0px, 0px)!important;
}