program tip

크롬은 드래그하는 동안 커서를 텍스트로 설정합니다.

radiobox 2020. 12. 29. 06:56
반응형

크롬은 드래그하는 동안 커서를 텍스트로 설정합니다.


내 응용 프로그램에는 많은 끌어서 놓기 기능이 있습니다. 드래그하는 동안 커서가 일부 잡기 커서로 변경되기를 원합니다. Internet Explorer와 Firefox는이를 위해 잘 작동하지만 Chrome은 항상 커서를 텍스트 커서로 변경합니다.


코드가 너무 많기 때문에 이러한 솔루션 중 어느 것도 나를 위해 일하지 않았습니다.

사용자 정의 jQuery 구현을 사용하여 드래그를 수행하고 mousedown핸들러 에이 줄을 추가하면 Chrome에서 트릭을 수행했습니다.

e.originalEvent.preventDefault();

텍스트 선택 이벤트를 끄십시오.

document.onselectstart = function(){ return false; }

이 비활성화됩니다 모든 페이지의 텍스트 선택을하며 브라우저 시작 사용자 정의 커서를 표시하는 것으로 보인다.

그러나 텍스트 선택은 전혀 작동하지 않으므로 드래그하는 동안에 만 수행하고 그 직후에 다시 켜는 것이 가장 좋습니다. false를 반환하지 않는 함수를 첨부하면됩니다.

document.onselectstart = function(){ return true; }

브라우저가 요소 내에서 텍스트를 선택하고 선택 커서를 표시하지 않도록하려면 다음을 수행 할 수 있습니다.

element.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);

함정

당신은 넣을 수 없습니다

document.onselectstart = function(){ return false; };

onselectstart가 이미 트리거 되었기 때문에 "mousedown"핸들러로.

해결책

따라서 작동하게하려면 mousedown 이벤트 전에 수행해야합니다. 마우스 오버 이벤트에서 마우스가 내 요소에 들어가 자마자 드래그 가능하고 선택할 수 있기를 원하기 때문에 마우스 오버 이벤트에서 수행했습니다. 그런 다음

document.onselectstart = null;

mouseout 이벤트를 호출합니다. 그러나 문제가 있습니다. 드래그하는 동안 mouseover / mouseout 이벤트가 호출 될 수 있습니다. 이에 대응하려면 드래그 / 마우스 다운 이벤트에서 flag_dragging을 true로 설정하고 드래그가 중지 될 때 false로 설정합니다 (마우스 업). mouseout 기능은 설정하기 전에 해당 플래그를 확인할 수 있습니다.

document.onselectstart = null;

라이브러리를 사용하지 않는다는 것을 알고 있지만 여기에 다른 사람들에게 도움이 될 수있는 jQuery 코드 샘플이 있습니다.

var flag_dragging = false;//counter Chrome dragging/text selection issue
$(".dragme").mouseover(function(){
    document.onselectstart = function(){ return false; };
}).mouseout(function(){
    if(!flag_dragging){
        document.onselectstart = null;
    }
});

//make them draggable
$(".dragme").draggable({
    start: function(event, ui){
        flag_dragging = true;
    }, stop: function(event, ui){
        flag_dragging = false;
    }
});

요소를 선택할 수 없도록 만들고 드래그 된 요소에 활성 의사 클래스를 추가하여 동일한 문제를 해결했습니다.

* {
    -webkit-user-select: none; 
}

.your-class:active {
    cursor: crosshair;
}

jQuery UI 드래그 및 정렬 가능 (버전 1.8.1)을 사용하는 것과 비슷한 문제가 있으며 매우 구체적이므로 동일한 라이브러리를 사용하고 있다고 가정합니다.

문제는 jQuery UI의 버그로 인해 발생합니다 (실제로 다른 Safari 버그의 수정 사항). 방금 jQuery UI http://dev.jqueryui.com/ticket/5678 에서 문제를 제기 했으므로 문제가 해결 될 때까지 기다려야 할 것 같습니다.

이 문제에 대한 해결 방법을 찾았지만 매우 어렵 기 때문에 무슨 일이 일어나고 있는지 정말로 알고있는 경우에만 사용합니다.)

if ($.browser.safari) {
    $.ui.mouse.prototype.__mouseDown = $.ui.mouse.prototype._mouseDown;
    $.ui.mouse.prototype._mouseDown = function(event){
        event.preventDefault();
        return $.ui.mouse.prototype.__mouseDown.apply(this, arguments);
    }
}

단순히 jQuery UI 코드에있는 수정 사항을 해제하기 때문에 기본적으로 무언가 손상 될 수 있습니다 .


Just use this line inside your mousedown event

arguments[0].preventDefault();

You can also disable text selection by CSS adding this class to your draggable element

.nonselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

I was facing almost same problem. I want cursor inside my DIV element and all its child to be the default, the CSS tips here helped in IE, FF and Opera, but not for Google Chrome. Here is what I have done in parent DIV:

<div ... onselectstart="return false;" ... > ... </div>

Now it is working fine. Hope this help.

ReferenceURL : https://stackoverflow.com/questions/2745028/chrome-sets-cursor-to-text-while-dragging-why

반응형