Question

我无法停止Jquery可拖动功能，我正在使用按钮启用它，而另一个停止它虽然它适用于我尝试但不可拖动的每个功能。

这是我的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 0px;
    top: 30px;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
  </style>
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"></head>
<body>
 
<button id="go">Go</button>
<button id="stop">STOP!</button>
<div class="block"></div>
   <style>
  #draggable {
   width: 150px;
    height: 150px;
     padding: 0.5em;
     top:5%;
     left: 5%; }
  </style>
<script>
// Start animation
$( "#go" ).click(function() {
  $( ".block" ).draggable();
});
// Stop animation when button is clicked
$( "#stop" ).click(function() {
  $( ".block" ).stop();
});

</script>

</body>
</html>

Answer 1

调用$.fn.stop方法停止运行动画，但不会停用拖动功能。您应该使用可拖动UI插件的disable方法：

$( ".block" ).draggable( "disable" );

演示： http://plnkr.co/edit/a6CdXcmSvEl1zuEMAy6i?p=info

UPD。感谢@zfrisch提供的改进版本，该版本还允许启用已禁用的可拖动版本：http://plnkr.co/edit/gvMOQwDEgL5aOzjP6ROa

Answer 2

<script>
	$(document).on('click', '#go', function(){
		$('.block').draggable( "enable" );
	});

	$(document).on('click', '#stop', function(){
		$('.block').draggable( "disable" );
	});

	//To remove the draggable behavior permanently use:
	//$('#item-id').draggable( "destroy" );
</script>

Answer 3

您可以使用此脚本切换方形可拖动功能，我认为这可能是执行此操作的最短方式：

    // Start animation
    $("#go").click(function() {
        $(".block").draggable({disabled : false});
    });    

    // Stop animation when button is clicked
    $("#stop").click(function() {
        $(".block").draggable({ disabled : true} );
    });

如何停止jquery可拖动功能？

3 个答案: