고스트 이미지의 드래그를 방지하는 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 안에 이미지를 중첩하려고 시도했습니다). 감사

---

마크 업 또는 JavaScript 코드에서 draggable속성을 설정할 수 있습니다 false. 이 데모를 참조하십시오 .

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').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 속성을 사용하여 웹킷 브라우저에서 이미지를 비활성화 할 수 있습니다.

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

---

dragstart이벤트를 처리하십시오 return false.

---

클릭 및 호버와 같은 다른 이벤트는 유지하면서 모든 브라우저 에서 이미지를 드래그 할 수 없게됩니다 . HTML5, JS 또는 CSS를 사용할 수있는 한 작동합니다.

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

사용자에게 JS가 있다고 확신한다면 JS 속성 등 만 사용하면됩니다. 유연성을 높이려면 ondragstart, onselectstart 및 일부 WebKit 탭 / 터치 CSS를 살펴보십시오.

---

실제로 드래그 이벤트를 사용해야하고 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();
    }

즐겨.

---

I found that for IE, you must add the draggable="false" attribute to images and anchors to prevent dragging. the CSS options work for all other browsers. I did this in jQuery:

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

---

There is a much easier solution here than adding empty event listeners. Just set pointer-events: noneto your image. If you still need it to be clickable, add a container around it which triggers the event.

---

Tested on Firefox: removing and putting back the image works! And it's transparent at the execution, too. For instance,

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

EDIT: This works only on IE and on Firefox, strangely. I also added draggable = false on each image. Still a ghost with Chrome and Safari.

EDIT 2: The background-image solution is genuinely the best one. The only subtlety is that the background-size property has to be redefined every time the background-image is changed! Or so, that's what it looked like from my side. Better still, I had an issue with normal img tags under IE, where IE failed to resize the images. Now, the images have the correct dimensions. Simple:

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

Also, perhaps consider those:

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

---

You can set the image that is shown when an item is dragged. Tested with Chrome.

setDragImage

use

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

Alternatively, as already mentioned in the answers, you can set draggable="false" on the HTML element, if not being able to drag the element at all is no issue.

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