Question

我的屏幕上有一个div框。我希望用户随时调整jquery框的大小并同时取消jquery draggable事件，反之亦然。我正在为可拖动部分使用插件，当我调整盒子大小时它会出现故障，所以解决方案是在我调整大小时取消可拖动事件。我在下面尝试了这段代码，但它不起作用，我知道逻辑不正确。我的问题是如何解决这个问题才能使其发挥作用？

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>

<script src="js/easing.js" ></script>
<script src="js/animadrag.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs
/jqueryui/1.7.1/themes/blitzer/jquery-ui.css">

<div class="body">
    <div class="move"></div>
</div>


<script type="text/javascript" >

$('.move').resizable();     

$('.move').on('hover',function (event) {
//something, although I don't know what, should be put here to cancel resizable
    $('.move').animaDrag({ 
                speed: 150, 
                interval: 120, 
                easing: null, 
                cursor: 'move', 
                boundary: '.body',
                grip: null,  
                overlay: true           
});     

</script>

这是工作的jsbin示例。 http://jsbin.com/obovof/2/edit

Answer 1

我不明白你为什么要在调整大小期间禁用draggable。从技术上讲，用户将无法在调整大小期间拖动元素。无论如何，如果你使用jqueryui方法draggable而不是animaDrag：你可以这样做：

$('.move').draggable().resizable({
    start: function(e, ui) {$(this).draggable( "disable" )},
    stop: function(e, ui) {$(this).draggable( "enable" )}
});

在可调整大小和可拖动之间设置jQuery事件切换

1 个答案: