developer tip

jquery-ui draggable을 비활성화하려면 어떻게해야합니까?

optionbox 2020. 8. 26. 07:48
반응형

jquery-ui draggable을 비활성화하려면 어떻게해야합니까?


예를 들어 UpdatePanel 포스트 백 중에 jQuery 드래그 가능을 비활성화하려면 어떻게합니까?


DisableDrag (myObject) 및 EnableDrag (myObject) 함수를 만들 수 있습니다.

myObject.draggable( 'disable' )

그때

myObject.draggable( 'enable' )

드래그 가능한 동작을 일시적으로 비활성화하려면 다음을 사용하십시오.

$('#item-id').draggable( "disable" )

드래그 가능한 동작을 영구적으로 제거하려면 다음을 사용하십시오.

$('#item-id').draggable( "destroy" )

jQuery에서 드래그 가능을 활성화 / 비활성화하려면 다음을 사용했습니다.

$("#draggable").draggable({ disabled: true });          

$("#draggable").draggable({ disabled: false });

@Calciphus 대답은 불투명도 문제로 인해 작동하지 않았으므로 다음을 사용했습니다.

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

모바일 장치에서도 작동했습니다.

코드는 다음과 같습니다. http://jsfiddle.net/nn5aL/1/


드롭시 드래그 가능을 비활성화하는 방법을 알아내는 데 시간이 조금 걸렸습니다 ui.draggable. 드롭 함수 내부에서 드래그되는 객체를 참조하는 데 사용 합니다.

$("#drop-target").droppable({
    drop: function(event, ui) {
        ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
    }
});

HTH 누군가


아무도 원본 문서를 보지 않은 것 같습니다. 당시는 없었을지도 모릅니다))

비활성화 된 옵션을 지정하여 드래그 가능 항목을 초기화합니다.

$( ".selector" ).draggable({ disabled: true });

초기화 후 비활성화 된 옵션을 가져 오거나 설정합니다.

//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );

대화 상자의 경우 draggable이라는 속성이 있으며 false로 설정합니다.

$("#yourDialog").dialog({
    draggable: false
});

질문이 오래되었지만 제안 된 솔루션을 시도했지만 대화 상자에서 작동하지 않았습니다. 이것이 나와 같은 다른 사람들에게 도움이되기를 바랍니다.


다음은 내부의 모습입니다. .draggable({});

$("#yourDraggable").draggable({
    revert: "invalid" ,
    start: function(){ 
        $(this).css("opacity",0.3);
    },
    stop: function(){ 
        $(this).draggable( 'disable' )
    },
    opacity: 0.7,
    helper: function () { 
        $copy = $(this).clone(); 
        $copy.css({
            "list-style":"none",
            "width":$(this).outerWidth()
        }); 
        return $copy; 
    },
    appendTo: 'body',
    scroll: false
});

클래스, 스타일, 불투명도 및 물건을 엉망으로 만들지 않는 더 간단하고 우아한 솔루션이 있습니다.

드래그 가능한 요소의 경우-요소를 어딘가로 이동하려고 할 때마다 실행되는 '시작'이벤트를 추가합니다. 이사가 합법적이지 않은 조건이 생깁니다. 불법적 인 움직임의 경우- 'e.preventDefault ();'로 방지하십시오. 아래 코드와 같습니다.

    $(".disc").draggable({
        revert: "invalid", 
        cursor: "move",
        start: function(e, ui){                
            console.log("element is moving");

            if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
                console.log("illegal move");
                //This will prevent moving the element from it's position
                e.preventDefault();
            }    

        }
    });

아니에요 :)


draggable속성 변경

<span draggable="true">Label</span>

<span draggable="false">Label</span>

참고 URL : https://stackoverflow.com/questions/1324044/how-do-i-disable-a-jquery-ui-draggable

반응형