CSS / JS เพื่อป้องกันการลากภาพผี?

มีวิธีการป้องกันไม่ให้ผู้ใช้เห็นผีของภาพที่พวกเขากำลังพยายามลาก (ไม่ต้องกังวลเกี่ยวกับความปลอดภัยของภาพ แต่เป็นประสบการณ์)

ฉันได้ลองวิธีนี้แล้วซึ่งแก้ไขปัญหาด้วยการเลือกสีน้ำเงินในข้อความและรูปภาพ แต่ไม่ใช่ภาพผี:

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

(ฉันพยายามทำรังภาพภายใน div ด้วยกฎเดียวกันกับที่ใช้กับ div) ขอบคุณ

คุณสามารถตั้งค่าdraggableแอตทริบิวต์เป็นfalseในรหัสมาร์กอัปหรือรหัส JavaScript

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

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

ฉันคิดว่าคุณสามารถเปลี่ยนของคุณ

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

เป็น

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

ลองมัน:

img {
  pointer-events: none;
}

และพยายามหลีกเลี่ยง

* {
  pointer-events: none;
}

คุณสามารถใช้คุณสมบัติ CSS เพื่อปิดใช้งานรูปภาพในเบราว์เซอร์ webkit

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

การดำเนินการนี้จะปิดใช้งานการลากรูปภาพในเบราว์เซอร์ทั้งหมดในขณะที่รักษาเหตุการณ์อื่นเช่นคลิกและโฮเวอร์ ทำงานได้ตราบใดที่ HTML5, JS หรือ CSS พร้อมใช้งาน

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

หากคุณมั่นใจว่าผู้ใช้จะมี JS คุณจะต้องใช้แอตทริบิวต์ JS และอื่น ๆ เพื่อความยืดหยุ่นมากขึ้นดูที่ ondragstart, onselectstart และ CSS WebKit tap / touch บางส่วน

จัดการกับเหตุการณ์และdragstartreturn false

คุณสามารถกำหนดภาพผีอื่นได้หากคุณต้องการใช้เหตุการณ์ลากและไม่สามารถตั้ง draggable = false ได้ ดังนั้นเพียงแค่กำหนด png ที่ว่างเปล่าเช่นนั้น:

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

วางภาพเป็นพื้นหลังของ div ที่ว่างเปล่าหรือภายใต้องค์ประกอบโปร่งใส เมื่อผู้ใช้คลิกที่รูปภาพเพื่อลากพวกเขากำลังคลิกที่ div

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

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

สำหรับ Firefox คุณต้องทำสิ่งนี้ให้ลึกขึ้น:

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();
    }

สนุก.

ฉันพบว่าสำหรับ IE คุณต้องเพิ่มแอตทริบิวต์ draggable = "false" ให้กับรูปภาพและจุดยึดเพื่อป้องกันการลาก ตัวเลือก CSS ใช้งานได้กับเบราว์เซอร์อื่นทั้งหมด ฉันทำสิ่งนี้ใน jQuery:

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

มีวิธีแก้ไขที่ง่ายกว่าที่นี่มากกว่าการเพิ่มผู้ฟังเหตุการณ์ที่ว่างเปล่า เพียงตั้งค่าpointer-events: noneภาพของคุณ หากคุณยังต้องการให้คลิกได้ให้เพิ่มคอนเทนเนอร์ที่ล้อมรอบซึ่งเป็นต้นเหตุของเหตุการณ์

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

ทดสอบกับ Firefox: การลบและนำกลับมาใช้งานได้จริง! และมันก็โปร่งใสในการดำเนินการเช่นกัน ตัวอย่างเช่น

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

แก้ไข : ใช้งานได้เฉพาะบน IE และ Firefox อย่างแปลกประหลาด ฉันยังเพิ่มdraggable = falseในแต่ละภาพ ยังคงเป็นผีกับ Chrome และ Safari

แก้ไข 2 : โซลูชันภาพพื้นหลังเป็นโซลูชันที่ดีที่สุดอย่างแท้จริง ความละเอียดเพียงอย่างเดียวคือbackground-sizeคุณสมบัติจะต้องมีการกำหนดใหม่ทุกครั้งที่มีการเปลี่ยนภาพพื้นหลัง! นั่นคือสิ่งที่ดูเหมือนจากข้างฉัน ยังดีกว่าฉันมีปัญหากับimgแท็กปกติภายใต้ IE ที่ IE ล้มเหลวในการปรับขนาดภาพ ตอนนี้ภาพมีขนาดที่ถูกต้อง ง่าย:

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

นอกจากนี้อาจพิจารณาสิ่งต่อไปนี้:

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

คุณสามารถตั้งค่ารูปภาพที่แสดงเมื่อลากรายการ ทดสอบกับ Chrome แล้ว

setDragImage

ใช้

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

อีกวิธีหนึ่งดังที่ได้กล่าวไปแล้วในคำตอบคุณสามารถกำหนดdraggable="false"องค์ประกอบ HTML ได้หากไม่สามารถลากองค์ประกอบได้เลยไม่มีปัญหา

be-all-end-all สำหรับการไม่เลือกหรือลากด้วยคำนำหน้าเบราว์เซอร์ทั้งหมด:

-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;

นอกจากนี้คุณยังสามารถตั้งค่าแอตทริบิวต์draggable falseคุณสามารถทำเช่นนี้กับอินไลน์ HTML: draggable="false"มี Javascript: elm.draggable = falseหรือกับ elm.attr('draggable', false)jQuery:

นอกจากนี้คุณยังสามารถจัดการกับฟังก์ชั่นonmousedown return falseคุณสามารถทำได้ด้วย inline HTML onmousedown="return false":, กับ Javascript: elm.onmousedown=()=>return false;หรือด้วย jQuery:elm.mousedown(()=>return false)

สิ่งนี้ใช้ได้กับฉันฉันใช้สคริปต์ไลต์บ็อกซ์บางตัว

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