触发"mouseup"时，jquery draggable引发错误 [英] jquery draggable throws error when 'mouseup' is triggered
问题描述
如果您构建一个简单的拖动器:
If you build a simple dragger:
$(document).ready(function(){
$('#tomove').draggable({
axis: 'x',
drag: function(event, ui) {
mouseUp();
}
});
});
然后您尝试以编程方式将其停止:
And you try to stop it programmatically:
function mouseUp() {
if($('#tomove').offset().left > 400) {
$('#tomove').trigger('mouseup');
}
}
您将在错误控制台中收到此消息:
You will get this message in error console:
this.helper为空
this.helper is null
有什么办法可以解决这个问题? 感谢您的帮助.
Is there any way to fix this? Thanks for your help.
推荐答案
您似乎只是想在可拖动元素上限制移动，这是正确的吗?您是否看到过以下页面: http://jqueryui.com/demos/draggable/#constrain-运动
It looks like you're just trying to constrain movement on the draggable element, is this correct? Have you seen this page: http://jqueryui.com/demos/draggable/#constrain-movement
编辑
然后呢?(示例页面，您要问的是-请注意jquery的包含位置)
How about this instead then: (sample page, does what you're asking - be mindful of the jquery inclusion location)
还请注意，我将方法的名称更改为更合适的名称.这不会阻止用户向左拖动.我不认为您想要阻止它们达到400(或任何其他高度)的效果.
Also notice I changed the name of the method to be something a little more apropos. This will not stop the user from being able to drag back to the left. I didn't think you wanted to actually stop them if they hit 400 (or whatever other wall).
如果要这样做，您只需$('#element').draggable('destroy')
If you want to do that, you merely $('#element').draggable('destroy')
<html>
<head>
<title>Draggable jQuery-UI Width Block</title>
<script src="jquery-1.4.2.min.js" ></script>
<script src="jquery-ui-1.8.1.custom.min.js" ></script>
</head>
<body>
<div id="tomove" style="width:100px;height:20px;background:silver;">
<span>some text</span>
</div>
<script>
$(document).ready( function() {
$('#tomove').draggable({
axis: 'x',
drag: function(event, ui) {
dragBlock( ui );
}
});
});
function dragBlock( ui ) {
if( ui.position.left > 400 ) {
ui.position.left = '400px';
}
if( ui.position.left < 0 ) {
ui.position.left = '0px';
}
}
</script>
</body>
</html>
这篇关于触发"mouseup"时，jquery draggable引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
