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


97

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

답변:


148

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

myObject.draggable( 'disable' )

그때

myObject.draggable( 'enable' )

2
작동합니다. draggable ()에 대한 전체 문서는 여기에 있습니다 . sortable () 객체도 마찬가지입니다 (드래그 앤 드롭 순서 변경을 허용하는 경우).
nickb

3
, draggable () 문서가 (지금?) 여기 에 있고 nickb의 링크가 있으며 위 의 데모로 이동 합니다. ;)
ruffin 2013 년

이렇게하면 "초기화 전에 draggable에서 메서드를 호출 할 수 없습니다. 'disable'메서드를 호출하려고했습니다."
Haseeb Zulfiqar


68

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

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

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

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

6
'disable'에는 CSS 관련 부작용이 있지만 완벽하게 작업을 파괴한다는 것을 알았습니다.
Niels Brinch 2013

1
@jedanput 비활성화 사용의 부작용은 드래그 가능한 요소가 회색으로 표시된다는 것입니다. 파괴는 외모를 그대로 두는 것 같습니다.
samazi

19

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

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

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

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

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

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

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


JSfiddle이 작동하지 않는 것 같습니다. 버튼이 클릭되지 않습니다 (최신 Chrome 사용). 나는 그것을 링크와 전화로 업데이트하려고 시도했지만 button()도움이되지 않았습니다.
ashes999 2013

2
주어진 모든 솔루션 중에서 이것은 나에게 100 % 작동 한 유일한 솔루션이었습니다. 다른 모든 솔루션 (비활성화 / 파괴 등의 조합 사용)은 CSS 문제를 해결하지 못했습니다. 드래그 + 드롭을 사용하는 내 앱에서 초기화 이후 드래그 된 요소의 불투명도가 터치되지 않은 요소와 다른 것을 발견했습니다. 모두 매우 지저분합니다. 솔루션과 jsfiddle 모두에 대해 @CarinaPilar에게 감사드립니다.
Andy Lorenz 2014 년

11

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

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

HTH 누군가


감사합니다. 이 솔루션은 AngularJS에서 드래그 가능 / 드롭 가능 지시문을 사용할 때 잘 작동하는 것으로 보입니다.
Banjo Drill

10

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

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

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

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

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

이것은 효과가 있지만 내 div를 약 50 % 불투명도로 만드는 부작용이 있습니다. 이유를 모르겠습니다.
Devil 's Advocate

@ScottBeeson jQuery에서 무언가를 비활성화 할 때마다 "ui-state-disabled"클래스가 추가됩니다. 다음을 사용하여 제거 할 수 있습니다. $ ( ". ui-draggable"). removeClass ( "ui-state-disabled")
Calciphus 2013 년

7

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

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

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


질문이 특히 jQueryUI Dialogs 와 관련이 있는지 확실하지 않지만 그럼에도 불구하고 귀하의 게시물이 도움이된다는 것을 알았습니다.
Shawn Eary 2013-08-21

3

다음은 내부의 모습입니다. .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
});

3

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

드래그 가능한 요소의 경우-요소를 어딘가로 이동하려고 할 때마다 실행되는 '시작'이벤트를 추가합니다. 이사가 합법적이지 않은 조건이 생깁니다. 불법적 인 움직임의 경우- '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();
            }    

        }
    });

아니에요 :)


0

draggable속성 변경

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

<span draggable="false">Label</span>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.