고스트 이미지의 드래그 방지를 위한 CSS/JS

고스트 이미지의 드래그 방지를 위한 CSS/JS

사용자가 드래그하려는 이미지의 고스트를 볼 수 없도록 하는 방법이 있습니까(이미지의 보안에 관한 것이 아니라 경험).

텍스트와 이미지의 파란색 선택 문제를 수정하려고 시도했지만 고스트 이미지는 수정하지 않았습니다.

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

(div에도 같은 규칙이 적용되어 div 안에 이미지를 네스트 해 보았습니다).감사해요.

Atribute를 다음과 같이 설정할 수 있습니다.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;
}

이렇게 하면 클릭 및 호버링과 같은 다른 이벤트를 유지하면서 모든 브라우저에서 이미지에 대한 끌기가 비활성화됩니다.HTML5, JS 또는 CSS 중 하나를 사용할 수 있는 한 작동합니다.

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

사용자에게 JS가 있다고 확신하는 경우 JS 속성 등을 사용하면 됩니다.유연성을 높이기 위해 ondragstart, onselect start 및 WebKit 탭/터치 CSS를 검토하십시오.

CSS 속성을 사용하여 웹킷브라우저 이미지를 디세블로 할 수 있습니다.

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

매우 단순합니다. 많은 논리로 복잡하게 만들지 마십시오. 단순 속성을 끌 수 있고 거짓으로 만듭니다.

<img draggable="false" src="img/magician.jpg" alt="" />

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또는 jQuery를 사용하는 경우:elm.attr('draggable', false).

또,onmousedown기능하다return false인라인 HTML을 사용하여 이 작업을 수행할 수 있습니다.onmousedown="return false", Javascript 포함:elm.onmousedown=()=>return false;또는 jQuery를 사용하는 경우:elm.mousedown(()=>return false)

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

처리:dragstart이벤트 및return false.

드래그 이벤트를 사용해야 하고 드래그 가능=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이미지를 반영합니다.그래도 클릭 가능해야 하는 경우 이벤트를 트리거하는 컨테이너를 주변에 추가합니다.

파이어폭스가 드래그 가능 속성(false로 설정되어 있는 경우)을 인식하지 않거나 링크/앵커 또는 이미지 요소에서 사용자가 드래그하는 CSS 규칙이 없는 경우:

포인터 이벤트를 그대로 유지하려면 MDN setDragImage에서 설명한 바와 같이 "드래그 타깃(드래그 스타트 이벤트가 실행되는 요소)에서 생성된 반투명 이미지"에 큰 총을 사용할 수 있습니다.사용방법:

if (/(firefox)/i.test(navigator.userAgent)) {
  document.querySelector('.my-non-draggable').addEventListener('dragstart',
    e => e.preventDefault()
  );
  // or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
}

Firefox에서 테스트 완료: 이미지 삭제 및 되돌리기 동작!사형 집행 과정에서도 투명합니다예를 들어.

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

편집: 이상하게도 IE와 Firefox에서만 작동합니다.저도 덧붙였습니다.draggable = false각 이미지에서.크롬과 사파리의 유령은 여전하다.

편집 2: 배경 이미지 솔루션이 정말 최고입니다.유일한 미묘함이란 게background-size배경 이미지를 변경할 때마다 속성을 재정의해야 합니다.아! 통상의 더건, 상과 with with에 .imgIE 의 「IE」 의 「IE」 의 「IE」 의 「IE」의 「IE」의 「IE」의 「IE」의 「IE」의 「IE」의 「IE」에 대해서.이제 이미지의 치수가 정확합니다.★★★★

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

또한 다음 사항을 고려하십시오.

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

항목을 끌 때 표시되는 이미지를 설정할 수 있습니다.Chrome으로 테스트 완료.

setDrag이미지

사용하다

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

이미했듯이 '어느 쪽으로든'을 설정할 수 .draggable="false"HTML 엘리먼트에서 엘리먼트를 드래그할 수 없는 경우는 문제가 되지 않습니다.

Empty Img Element(비어 있음)
Img - document - img - document.createElement("img")

[HTML Code]
<div id="hello" draggable="true">Drag!!!</div>

[JavaScript Code]
var block = document.querySelector('#hello');
block.addEventListener('dragstart', function(e){
    var img = document.createElement("img");
    e.dataTransfer.setDragImage(img, 0, 0);
})

//이미지 끌기 사용 안 함

$(document).on("dragstart", function (e) {
  e.preventDefault();
});

여기에는 jQuery가 필요합니다.이렇게 하면 텍스트나 img를 끌 수 없습니다.끌지 못하도록 할 요소로 문서를 바꿉니다.

이 작업은 라이트박스 스크립트를 사용합니다.

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

언급URL : https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image