如何在 JQuery UI Draggable 元素的启动事件处理程序期间使 css 位置更改生效？

发布于 2024-07-27 00:19:46 字数 1418 浏览 9 评论 0原文

我有一个奇怪的情况，我需要在用户开始拖动可拖动元素后立即修改它的位置。因此，在可拖动元素的启动事件处理程序期间，我尝试设置位置。它不会响应位置更改，除非 - 这很奇怪 - 我在更改位置后做了一些操作导致 JavaScript 错误。这是一个示例：


<html>
<head>
<title>Drag reposition test</title>

<script type="text/javascript" src="js/css_browser_selector.js"></script> 
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->

<style type="text/css">
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>

<script type="text/javascript">

$(function() {
    $("#initialdragger").draggable({    
        start: function(e, ui) {
            $('#initialdragger').css('top', 400);
            x = y; // Javascript error, which weirdly causes a redraw.
        }
    });     
});
</script>

</head>

<body>

<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
    <p>Drag me around</p>       
</div>

</body>
</html>

在这种情况下，我如何才能合法地导致重绘发生？ JQuery 的 hide() 和 show() 不起作用，这些也不起作用方法。

原文

I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:


<html>
<head>
<title>Drag reposition test</title>

<script type="text/javascript" src="js/css_browser_selector.js"></script> 
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->

<style type="text/css">
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>

<script type="text/javascript">

$(function() {
    $("#initialdragger").draggable({    
        start: function(e, ui) {
            $('#initialdragger').css('top', 400);
            x = y; // Javascript error, which weirdly causes a redraw.
        }
    });     
});
</script>

</head>

<body>

<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
    <p>Drag me around</p>       
</div>

</body>
</html>

How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我的黑色迷你裙 2024-08-03 00:19:46

我认为绑定 mousedown 事件会让你得到你想要的

<script type="text/javascript">
    $(function() {
        $("#initialdragger").draggable();
        $('#initialdragger').bind("mousedown", function(e) {
            $(this).css('top', 400);
        });
    });
</script>

I think binding a mousedown event will get you what you want

<script type="text/javascript">
    $(function() {
        $("#initialdragger").draggable();
        $('#initialdragger').bind("mousedown", function(e) {
            $(this).css('top', 400);
        });
    });
</script>

回复收藏 0 原文

~没有更多了~