blocks|key|1470155|text|可以创建DisableDrag(myObject)和EnableDrag(myObject)函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1470156|myObject.draggable(+'disable'+)|code-block|syntax|javascript|1470157|然后|1470158|myObject.draggable(+'enable'+)|1470159|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Could create a DisableDrag(myObject) and a EnableDrag(myObject) function

<pre><code>myObject.draggable( 'disable' )
</code></pre>

Then 

<pre><code>myObject.draggable( 'enable' )
</code></pre>

blocks|key|1255620|text|要临时禁用可拖动行为，请使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255621|$('#item-id').draggable(+"disable"+)|code-block|syntax|javascript|1255622|要永久删除可拖动行为，请使用：|1255623|$('#item-id').draggable(+"destroy"+)|1255624|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To temporarily disable the draggable behavior use:

<pre><code>$('#item-id').draggable( "disable" )
</code></pre>

To remove the draggable behavior permanently use:

<pre><code>$('#item-id').draggable( "destroy" )
</code></pre>

blocks|key|1255806|text|要在我使用的jQuery中启用/禁用draggable：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255807|$("#draggable").draggable({+disabled:+true+});++++++++++

$("#draggable").draggable({+disabled:+false+});|code-block|syntax|javascript|1255808|@Calciphus+answer不适用于我的不透明问题，所以我使用：|1255809|div.ui-state-disabled.ui-draggable-disabled+{opacity:+1;}|1255810|也可以在移动设备上工作。|1255811|下面是代码：http://jsfiddle.net/nn5aL/1/|offset|length|1255812|enabledisabledraggablejqueryopacityproblemhtml|1255813|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/nn5aL/1/|1|/questions/tagged/enable|2|/questions/tagged/disable|3|/questions/tagged/draggable|4|/questions/tagged/jquery|5|/questions/tagged/opacity|6|/questions/tagged/problem|7|/questions/tagged/html^0|0|0|0|0|0|6|S|0|0|0|6|1|6|7|2|D|9|3|M|6|4|S|7|5|Z|7|6|16|4|7|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1G|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1J|8|@]|9|@$O|1K|P|1L|1|1M]]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@$O|1O|P|1P|1|1Q]|$O|1R|P|1S|1|1T]|$O|1U|P|1V|1|1W]|$O|1X|P|1Y|1|1Z]|$O|20|P|21|1|22]|$O|23|P|24|1|25]|$O|26|P|27|1|28]]|A|$]]|$1|S|3|-4|5|6|7|29|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]|12|$5|V|W|X|A|$Y|13]]|14|$5|V|W|X|A|$Y|15]]|16|$5|V|W|X|A|$Y|17]]|18|$5|V|W|X|A|$Y|19]]|1A|$5|V|W|X|A|$Y|1B]]|1C|$5|V|W|X|A|$Y|1D]]]]

To enable/disable draggable in jQuery I used: 

<pre><code>$("#draggable").draggable({ disabled: true }); 

$("#draggable").draggable({ disabled: false });
</code></pre>

@Calciphus answer didn't work for me with the opacity problem, so I used:

<pre><code>div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}
</code></pre>

Worked on mobile devices either.

Here is the code: <a href="http://jsfiddle.net/nn5aL/1/">http://jsfiddle.net/nn5aL/1/</a>

<a href="/questions/tagged/enable" class="post-tag" title="show questions tagged 'enable'" rel="tag">enable</a><a href="/questions/tagged/disable" class="post-tag" title="show questions tagged 'disable'" rel="tag">disable</a><a href="/questions/tagged/draggable" class="post-tag" title="show questions tagged 'draggable'" rel="tag">draggable</a><a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a><a href="/questions/tagged/opacity" class="post-tag" title="show questions tagged 'opacity'" rel="tag">opacity</a><a href="/questions/tagged/problem" class="post-tag" title="show questions tagged 'problem'" rel="tag">problem</a><a href="/questions/tagged/html" class="post-tag" title="show questions tagged 'html'" rel="tag">html</a>

blocks|key|1255549|text|我花了一点时间才弄明白如何在drop上禁用draggable+-使用ui.draggable来引用从drop函数内部拖动的对象：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1255550|$("#drop-target").droppable({
++++drop:+function(event,+ui)+{
++++++++ui.draggable.draggable("disable",+1);+//+*not*+ui.draggable("disable",+1);
++++++++…
++++}
});|code-block|syntax|javascript|1255551|HTH某人|1255552|entityMap^0|Y|C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

It took me a little while to figure out how to disable draggable on drop—use <code>ui.draggable</code> to reference the object being dragged from inside the drop function:

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

HTH someone

blocks|key|1255672|text|似乎没有人看过原始文档。可能当时没有它))|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255673|使用指定的禁用选项初始化可拖动对象。|1255674|$(+".selector"+).draggable({+disabled:+true+});|code-block|syntax|javascript|1255675|在初始化后，获取或设置禁用选项。|1255676|//getter
var+disabled+=+$(+".selector"+).draggable(+"option",+"disabled"+);
//setter
$(+".selector"+).draggable(+"option",+"disabled",+true+);|1255677|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Seems like no one looked at the original documentation. May be there was no it at that time))

Initialize a draggable with the disabled option specified.

<pre><code>$( ".selector" ).draggable({ disabled: true });
</code></pre>

Get or set the disabled option, after init.

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

blocks|key|1255735|text|在对话框的情况下，它有一个名为draggable的属性，将其设置为false。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255736|$("#yourDialog").dialog({
++++draggable:+false
});|code-block|syntax|javascript|1255737|尽管这个问题很老，但我尝试了所提出的解决方案，它对对话框不起作用。希望这能对我这样的人有所帮助。|1255738|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In the case of a dialog, it has a property called draggable, set it to false.

<pre><code>$("#yourDialog").dialog({
 draggable: false
});
</code></pre>

Eventhough the question is old, i tried the proposed solution and it did not work for the dialog. Hope this may help others like me.

blocks|key|1470523|text|下面是.draggable({});内部的内容|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1470524|$("#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
});|code-block|syntax|javascript|1470525|entityMap^0|3|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

The following is what this would look like inside of <code>.draggable({});</code>

<pre><code>$("#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
});
</code></pre>

blocks|key|1255944|text|我有一个更简单、更优雅的解决方案，它不会搞乱类、样式、不透明等等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255945|对于可拖动的元素-添加“start”事件，该事件将在您每次尝试将元素移动到某个位置时执行。你将有一个移动是不合法的条件。对于非法的移动-使用'e.preventDefault();‘防止它们，如下面的代码所示。|1255946|++++$(".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();
++++++++++++}++++

++++++++}
++++});|code-block|syntax|javascript|1255947|欢迎使用:)|1255948|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I have a simpler and elegant solution that doesn't mess up with classes, styles, opacities and stuff.

For the draggable element - you add 'start' event which will execute every time you try to move the element somewhere. You will have a condition which move is not legal. For the moves that are illegal - prevent them with 'e.preventDefault();' like in the code below. 

<pre><code> $(".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();
 } 

 }
 });
</code></pre>

You are welcome :)

blocks|key|1470576|text|将draggable属性从|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1470577|<span+draggable="true">Label|code-block|syntax|javascript|1470578|至|1470579|<span+draggable="false">Label|1470580|entityMap^0|1|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

Change <code>draggable</code> attribute from

<pre><code>&lt;span draggable="true"&gt;Label&lt;/span&gt;
</code></pre>

to

<pre><code>&lt;span draggable="false"&gt;Label&lt;/span&gt;
</code></pre>

How do I disable a jQuery draggable, e.g. during an UpdatePanel postback?

How do I disable a jquery-ui draggable?

jQuery

如何禁用jQuery可拖动对象，例如在UpdatePanel回发期间？

问如何禁用jquery-ui draggable？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何禁用jquery-ui draggable？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何禁用jquery-ui draggable？
EN