HTML 요소에서 끌어서 놓기를 비활성화 하시겠습니까?
나는 완전한 기능을 갖춘 윈도우 시스템을 구현하려는 웹 응용 프로그램에서 작업하고 있습니다. 지금은 매우 잘 진행되고 있습니다. 한 가지 사소한 문제 만 발생하고 있습니다. 때때로 내 응용 프로그램의 일부 (대부분 크기 조정 작업을 트리거하는 내 창의 모서리 div)를 드래그 할 때 웹 브라우저가 영리 해지고 무언가를 드래그 앤 드롭해야한다고 생각합니다. 결과적으로 브라우저가 드래그 앤 드롭 작업을 수행하는 동안 내 작업이 보류됩니다.
브라우저의 드래그 앤 드롭을 비활성화하는 쉬운 방법이 있습니까? 이상적으로는 사용자가 특정 요소를 클릭하는 동안이 기능을 끌 수 있지만 다시 활성화하여 사용자가 내 창 콘텐츠에서 브라우저의 정상적인 기능을 계속 사용할 수 있도록하고 싶습니다. 나는 jQuery를 사용하고 있으며 문서를 찾아 볼 수는 없지만 순수한 jQuery 솔루션을 알고 있다면 훌륭 할 것입니다.
간단히 말해서, 사용자가 마우스 버튼을 누르고있는 동안 브라우저 텍스트 선택 및 끌어서 놓기 기능을 비활성화하고 사용자가 마우스를 놓으면 해당 기능을 복원해야합니다.
mousedown 이벤트에서 기본값을 방지하십시오.
<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>
또는
<div onmousedown="return false">asd</div>
이건 작동합니다 ..... 해보세요.
<BODY ondragstart="return false;" ondrop="return false;">
도움이되기를 바랍니다. 감사
draggable="false"속성 을 사용하여 끌기를 비활성화 할 수 있습니다 .
http://www.w3schools.com/tags/att_global_draggable.asp
이것은 작동 할 수 있습니다 : 텍스트, 이미지 및 기본적으로 모든 것에 대해 css3로 선택을 비활성화 할 수 있습니다.
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
물론 최신 브라우저에만 해당됩니다. 자세한 내용은 다음을 확인하십시오.
CSS를 사용하여 텍스트 선택 강조 표시를 비활성화하는 방법은 무엇입니까?
jQuery를 사용하면 다음과 같습니다.
$(document).ready(function() {
$('#yourDiv').on('mousedown', function(e) {
e.preventDefault();
});
});
제 경우에는 입력에서 텍스트를 드롭하지 못하도록 사용자를 비활성화하고 싶었으므로 "마우스 다운"대신 "드롭"을 사용했습니다.
$(document).ready(function() {
$('input').on('drop', function(event) {
event.preventDefault();
});
});
대신 event.preventDefault () false를 반환 할 수 있습니다. 차이점이 있습니다.
그리고 코드 :
$(document).ready(function() {
$('input').on('drop', function() {
return false;
});
});
이 시도
$('#id').on('mousedown', function(event){
event.preventDefault();
}
위해 input요소, 이 대답은 나를 위해 작동합니다.
Angular 4의 사용자 지정 입력 구성 요소에 구현했지만 순수한 JS로 구현할 수 있다고 생각합니다.
HTML
<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)"
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>
구성 요소 정의 (JS) :
export class CustomInputComponent {
//component construction and attribute definitions
disableEvent(event) {
event.preventDefault();
return false;
}
}
@SyntaxError의 답변 사용, https://stackoverflow.com/a/13745199/5134043
I've managed to do this in React; the only way I could figure out was to attach the ondragstart and ondrop methods to a ref, like so:
const panelManagerBody = React.createRef<HTMLDivElement>();
useEffect(() => {
if (panelManagerBody.current) {
panelManagerBody.current.ondragstart = () => false;
panelManagerBody.current.ondrop = () => false;
}
}, [panelManagerBody]);
return (
<div ref={panelManagerBody}>
I will just leave it here. Helped me after I tried everything.
$(document.body).bind("dragover", function(e) {
e.preventDefault();
return false;
});
$(document.body).bind("drop", function(e){
e.preventDefault();
return false;
});
This JQuery Worked for me :-
$(document).ready(function() {
$('#con_image').on('mousedown', function(e) {
e.preventDefault();
});
});
참고URL : https://stackoverflow.com/questions/704564/disable-drag-and-drop-on-html-elements
'programing' 카테고리의 다른 글
| Android에서 Looper, Handler 및 MessageQueue의 관계는 무엇입니까? (0) | 2020.08.29 |
|---|---|
| Javascript / jQuery의 배열에서 여러 요소 제거 (0) | 2020.08.29 |
| django : BooleanField, 기본값을 true로 설정하는 방법은 무엇입니까? (0) | 2020.08.29 |
| row_number ()를 사용한 SQL 업데이트 (0) | 2020.08.29 |
| Android Studio에서 "기호를 확인할 수 없음"이라고 말하지만 프로젝트가 컴파일됩니다. (0) | 2020.08.29 |